在 axios 拦截器中使用时，redux 调度不起作用

Posted 2023-04-14

【中文标题】在 axios 拦截器中使用时，redux 调度不起作用

【英文标题】：redux dispatch not work when use in axios interceptors

【发布时间】：2020-06-23 21:37:27

【问题描述】：

我想在 axios 返回错误时显示快餐栏。 我使用 redux 来配置快餐栏。

axiosAgent.interceptors.response.use(
  function(response) 
    return response;
  ,
  function(error) 
    console.log('object')
    const dispatch = useDispatch();
    dispatch(
      type: ActionsTypes.CHANGE_SNACKBAR_CONFIG,
      payload:  variant: "error", message: Strings.errors.problem 
    );
    dispatch( type: ActionsTypes.CHANGE_SNACKBAR_SHOW, payload: true );
    return Promise.reject(error);
  
);

这是我的快餐栏组件：

export default function Snackbar() 
  const open = useSelector(state => state.Snackbar.showSnackbar);
  const config = useSelector(state => state.Snackbar.snackbarConfig);
  const dispatch = useDispatch();

  const handleClose = (event, reason) => 
    if (reason === "clickaway") 
      return;
    
    dispatch( type: ActionsTypes.CHANGE_SNACKBAR_SHOW, payload: false );
  ;
  useEffect(() => 
    console.log(config);
  , [config]);
  return (
    <SB open=open autoHideDuration=6000 onClose=handleClose>
      <Alert onClose=handleClose severity=config.variant>
        config.message
      </Alert>
    </SB>
  );

但不起作用。 当我从组件调度它时它可以工作，但在这里不起作用。

【问题讨论】：

useDispatch 必须在 React 组件的上下文中调用。

【参考方案1】：

钩子，例如useDispatch()，只能在函数组件的主体中使用。你不能在拦截器中使用useDispatch。如果你需要在拦截器中调度一个动作，你需要引用store对象，并调用store.dispatch(/* action */)