使用 redux-toolkit 在 axios 拦截器中调度-解网

问：

我正在尝试在 axios 响应拦截器中调度 redux 工具包操作。

我看到一些其他问题建议人们使用store.dispatch(somefunction())

在 redux 工具包中，您通常会调用钩子来调度操作，但由于它是一个钩子，因此我无法在我的非组件 axios 拦截函数中调用它。useDispatch()

myaxios.js

import axios from 'axios'
const BASE_URL = 'http://localhost:8080'
export const myaxios = axios.create({
  baseUrl: BASE_URL
})

axiosWithIntercept.js（缩写为问题范围）：

import { myaxios } from './myaxios'
myaxios.interceptors.response.use(resp => resp, async (err) => {
  if (err?.resp?.status === 401) {
    // run my dispatch action here
  }
})
export default myaxios

reactjs react-native axios redux 工具包

您导入您创建的商店，例如应用程序正在使用的同一商店。不，萨哈卜的建议有点复杂（而且愚蠢）且没有必要。我的建议与@Vivekajee的答案相同。另一种方法是重构代码，以便您可以从钩子添加 axios 拦截器，其中钩子也在范围内且可用。这些建议中的任何一个都有意义吗？useEffectuseDispatch

0赞 jjyj 11/16/2023

你是对的，直接导入商店似乎很有效。不知道这是可能的，因为我总是被告知要利用.似乎有很多关于将 store 直接导入组件作为反模式的讨论，但由于这不是一个组件，我认为它应该没问题。useDispatch

0赞 Drew Reese 11/16/2023

正确。在 React 组件中，您将用于为组件订阅特定的状态更改，并用于访问提供的存储函数。然而，当在 React 之外时，这些显然是平淡无奇的，因此直接使用对象是可以接受的。useSelectoruseDispatchdispatchstore

答：

0赞 Sahab 11/16/2023 #1

import { myaxios } from './myaxios';

export const myaxiosFunc = (dispatch,storeActions) => {
    myaxios.interceptors.response.use(resp => resp, async (err) => {
        if (err?.resp?.status === 401) {
            // run my dispatch action here
            dispatch(storeActions.yourMethodName());
        }
    })

}

export default myaxiosFunc;

import store from './path-to-your-redux-store'; // Update the path accordingly
.
.
.
myaxios.interceptors.response.use(resp => resp, async (err) => {
  if (err?.response?.status === 401) {
    // Dispatch your Redux action here
    store.dispatch(yourReduxAction());
  }
  return Promise.reject(err);
});

上一个：是否可以在 Next.js 13 版本中使用 axios？

下一个：Axios 错误：“请求失败，状态代码为 500”

使用 redux-toolkit 在 axios 拦截器中调度

dispatch in axios interceptor with redux-toolkit

评论

评论