Dispatch 放置在 Axios 拦截器中时不起作用答案

【问题标题】：Dispatch is not working when it is placing in Axios interceptorDispatch 放置在 Axios 拦截器中时不起作用
【发布时间】：2023-02-08 21:25:29
【问题描述】：

我在 axios 拦截器中使用调度事件，所以每当我从 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);
        }
      );
    };

当我收到 400 错误但未发生调度时，下面的 addErrorToast 正确触发。解决此问题的任何解决方案或建议

const addErrorToast = ()=>{
  const dispatch = useDispatch();
  dispatch(
          addToast({
            type: "success",
            msg: (
              <FormattedMessage
                id="notifications.connected"
                defaultMessage="You are connected!"
              />
            ),
            hasCloseIcon: false,
          })
      );
}

【问题讨论】：

标签： reactjs axios react-redux interceptor

【解决方案1】：

您是否在 Redux Provider 包装器之外导入此 Axios 配置？这是一个很容易犯的错误，因为这个配置通常会导入到基本的index.tsx/main.tsx文件中，而 Redux 包装器设置在同一个文件或App.tsx中，在这两种情况下，你的 Axios 配置将无法@ 987654324@。

确保在 Redux Provider 包装器中导入此 axios 配置：

这行不通：

索引.tsx

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux'
import store from './store'
import App from './App';
import initAxios from './config/axios';

initAxios();

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>   <--- Store does not wrap Axios
      <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root'),
);

这应该有效：

索引.ts

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux'
import store from './store'
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root'),
);

应用程序.tsx

import initAxios from 'config/axios';

initAxios();

return (...);

我希望这有帮助！

【讨论】：