我在axios拦截器中使用了dispatch事件,这样每当我从API中得到400错误时,我就会将事件发送到UI,以通知消息和重定向。请参阅
export const loggerInterceptor = (AXIOS ) => {
const { request, response } = AXIOS.interceptors;
const token = getCookie(COOKIE_JWT_TOKEN);
request.use((config) => {
config.performance = calculateTimes();
config.timestamp = Date.now();
return config;
});
response.use(
(response) => {
if (
response
) {
flightInfo = {
...flightInfo,
...response.data,
};
}
return Promise.resolve(response);
},
(error) => {
if(error.response.status===400)
{
addErrorToast();
window.location.href= window.location.origin +'/app';
}
return Promise.reject(error);
}
);
};
下面的addErrorToast是正确触发时,我得到400错误,但调度没有发生.任何解决方案或建议,以解决这个问题
const addErrorToast = ()=>{
const dispatch = useDispatch();
dispatch(
addToast({
type: "success",
msg: (
<FormattedMessage
id="notifications.connected"
defaultMessage="You are connected!"
/>
),
hasCloseIcon: false,
})
);
}
1条答案
按热度按时间2eafrhcq1#
您是否在Redux提供程序 Package 器之外导入此Axios配置?这是一个很容易犯的错误,因为此配置通常导入到基本
index.tsx
/main.tsx
文件中,Redux Package 器设置在同一文件或App.tsx
中,在这两种情况下,您的Axios配置将无法导入dispatch
。确保你在Redux提供者 Package 器中导入了这个axios配置。你还想***把你的拦截器变成一个钩子***这样它就可以使用其他钩子了。
我创建了一个沙箱,其中包含一个Axios拦截器需要分派到Redux的工作示例。
https://codesandbox.io/p/sandbox/react18-axios-interceptor-dispatch-to-redux-jiin13
希望能帮上忙!