在通过动作调度进行状态更新后，在 React 中使用 Redux 执行函数？

Posted 2023-02-22

【中文标题】在通过动作调度进行状态更新后，在 React 中使用 Redux 执行函数？

【英文标题】：Execute function in React with Redux after the update of the STATE made by the dispatch of an action?

【发布时间】：2021-02-16 14:31:51

【问题描述】：

我将 React 与 Redux 和 Thunk middleware 一起使用。

在我的应用中，我使用 Axios 与需要承载身份验证的 Web Api 进行交互。当请求状态为 401 Not Authorized 时，我使用拦截器进行拦截。在这种情况下，我有一个刷新 TOKEN 并将其保存在我的 Redux Store 中的操作。

在我的 Axios 拦截器中，我想在执行刷新和保存新令牌的 Redux 操作后立即重新执行我未经授权的请求（使用 axios.request(error.config)）。当我的商店中保存了新的 TOKEN 时，我需要执行。

我应该怎么做？

【参考方案1】：

如果您想使用相同的配置重试请求，并且只更改 authToken，您可以尝试以下操作：

const authenticationProvider = (
  store,
  authAction
) => 
  axios.interceptors.response.use(
    response => response, 
    e => setResponseInterceptor(e)
  );



const setResponseInterceptor = (e, authAction, store) => 
  if (
    e.config &&
    e.response &&
    e.response.status === 401 &&
    authAction
  ) 
    console.log('401 intercepted', e);
    return store.dispatch(authAction()).then(_ => api.request(e.config));
  

  return Promise.reject(e);
;

在你调用 Redux Provider 的 App.js 上，像这样调用 authProvider

authenticationProvider(reduxStore, () =>  
  /* Re authenticate function */
  // here you should call the auth service again and save the response on redux
  // or call the re-auth action with reduxStore.dispatch( /* ACTION */)
);

感谢和愉快的编码！

【讨论】：

对不起@AxelBrei，但我不明白你的回答。您的代码中的 authenticationProvider 是什么？我能够使用代码 401 拦截响应，并且能够再次运行该请求。问题是请求应该在我的身份验证操作更新状态之后开始。

@ChristianCascone authenticationProvither 只是您包装所有逻辑以调用后端并尝试再次进行身份验证的函数名称。我在拦截器中所做的是捕获请求错误，因此它不应该在请求之后调度操作。此外，如果您需要等待响应，请使用 Promise 或 async/await 来处理异步请求。希望对您有所帮助！