Как создать playload в createAsyncThunk при использовании axios

Я начинаю изучать 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)

что связано с полезной нагрузкой, означающей, что я не должен возвращать аксиомы в payloadCreator в документе они используют async / await только для возврата результата, но в doc аксиоме упоминается

ПРИМЕЧАНИЕ: async / await является частью ECMAScript 2017 и не поддерживается в Internet Explorer и старых браузерах, поэтому используйте его с осторожностью.

Итак, как мне подойти к этому вопросу и как мне вызвать axios в createAsyncThunk


javascript redux axios redux-toolkit redux-thunk
person Amir Heshmati    schedule 29.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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;
      }
    },
  }
);
person markerikson    schedule 29.08.2020
comment
Мне нужно позвонить async/await таким образом. Я не хочу этого делать, поскольку он не полностью поддерживается developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ - person Amir Heshmati; 30.08.2020