当通过dispatch传递时，无法在createAsyncThunk内部访问额外的参数。

Question

我正在将一个axios实例作为额外参数传递给更新用户thunk action，但我无法访问"extra"参数。我只能访问其他所有字段，比如"getState"，"dispatch"等等。其中axios实例是自定义axios钩子的响应，我在发出请求之前使用它来添加令牌到头部。

profile.jsx

dispatch(updateUser(userData, { extra: { axios: axiosInstance } }));

userSlice.jsx

const updateUser = createAsyncThunk(
  'user/update',
  async (userData, { dispatch, getState, extra }) => {
    try {
      const axiosInstance = extra.axios; 
      const response = await axiosInstance.put("/update-endpoint", userData);

      const responseData = response.data;

      return responseData;
    } catch (error) {
      throw error;
    }
  }
);

- somnath navale

---

你无法访问extra参数，因为它在设置时被传递给thunk中间件。只需在userSlice中导入axios即可。 - undefined

Answer 1

在设置中指定的thunk中间件上，thunkAPI中的"extra"是可用的"额外参数"。

import { configureStore } from '@reduxjs/toolkit';
import axiosInstance from '../service';

const store = configureStore({
  ...
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: {
          axios: axiosInstance
        },
      },
    }),
  ...
});

dispatch(updateUser(userData));

const updateUser = createAsyncThunk(
  'user/update',
  async (userData, thunkApi) => {
    try {
      const axiosInstance = thunkApi.extra.axios; 
      const { data } = await axiosInstance.put("/update-endpoint", userData);

      return data;
    } catch (error) {
      thunkApi.rejectWithError(error);
    }
  }
);

查看getDefaultMiddleware以获取更多详细信息和信息。

另一种方法是直接在user切片中导入axiosInstance。

...
import axiosInstance from '../service';

...

const updateUser = createAsyncThunk(
  'user/update',
  async (userData, thunkApi) => {
    try {
      const { data } = await axiosInstance.put("/update-endpoint", userData);

      return data;
    } catch (error) {
      thunkApi.rejectWithError(error);
    }
  }
);

如果你必须从调用的React组件传递axiosInstance，那么请将它传递给动作负载。

dispatch(updateUser({
  data: {
    userData
  },
  extra: {
    axios: axiosInstance
  }
}));

const updateUser = createAsyncThunk(
  'user/update',
  async ({ data, extra }, thunkApi) => {
    const { userData } = data;
    const { axios: axiosInstance } = extra;

    try {
      const { data } = await axiosInstance.put("/update-endpoint", userData);

      return data;
    } catch (error) {
      thunkApi.rejectWithError(error);
    }
  }
);

- Drew Reese

---

axiosInstance是我自定义的useAxios钩子的响应，我在发出请求时使用它来添加令牌，并通过重新生成令牌并再次发出相同请求来处理403错误。 - undefined

@somnathnavale 嗯，这是一个相当重要的细节。请编辑您的帖子，包括您正在使用的所有相关代码的完整 [mcve]。与此同时，我已经更新了我的答案，提供了另一种可能的解决方案，通过在分派的操作中传递axios实例。 - undefined