Question

我开始学习redux，并且有一个动作创建者（createAsyncThunk）用于执行异步任务，我正尝试在其中使用axios

export const loginUser = createAsyncThunk(
  "auth/login",
  (authData) => {
    return axios.post("auth/token/login/", {
      email: authData.email,
      password: authData.password,
    });
  },
  {
    condition: (authData, { getState, extra }) => {
      const { auth } = getState();
      if (["fulfilled", "loading"].includes(auth.status)) {
        return false;
      }
    },
  }
);

这行得通，但我明白了

index.js:1 A non-serializable value was detected in an action, in the path: `payload.config.transformRequest.0`. Value: ƒ transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Accept');
    normalizeHeaderName(headers, 'Content-Type');

    if (utils.isFormData(data) || utils.isArrayBuffer(data) || utils.i… 
Take a look at the logic that dispatched this action:  {type: "auth/login/fulfilled", payload: {…}, meta: {…}} 
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

这是由于有效载荷所致，我不应该在doc中的payloadCreator中返回axios 他们只使用async / await来返回结果，但是在提及的axios doc中

注意：async / await是ECMAScript 2017的一部分，并且Internet Explorer和较旧的浏览器不支持，因此请谨慎使用。

那么我将如何处理此问题以及如何在createAsyncThunk中称axios

Answer 1

axios.post()返回一个Axios response对象。您需要改为返回response.data字段：

export const loginUser = createAsyncThunk(
  "auth/login",
  async (authData) => {
    const response = axios.post("auth/token/login/", {
      email: authData.email,
      password: authData.password,
    });
    return response.data;
  },
  {
    condition: (authData, { getState, extra }) => {
      const { auth } = getState();
      if (["fulfilled", "loading"].includes(auth.status)) {
        return false;
      }
    },
  }
);

使用axios时如何在createAsyncThunk中创建播放负载

1 个答案: