Действие React-Redux не запускается

Question

Я использую React с react-redux, redux and redux-actions.

У меня есть одно действие, которое берет текущий токен, сохраненный в localStorage, и гарантирует, что его срок действия не истек, например:

export const verifyLogin = () => {
  return verifyLoginAC({
    url: "/verify/",
    method: "POST",
    data: {
      token: `${
        localStorage.getItem("token")
          ? localStorage.getItem("token")
          : "not_valid_token"
      }`
    },
    onSuccess: verifiedLogin,
    onFailure: failedLogin
  });
};

function verifiedLogin(data) {
  const user = {
    ...data.user
  }
  setUser(user);
  return {
    type: IS_LOGGED_IN,
    payload: true
  };
}

function failedLogin(data) {
  return {
    type: IS_LOGGED_IN,
    payload: false
  };
}

Когда он проверяет токен, он возвращает ответ следующим образом:

{
  token: "token_data",
  user: {
    username: "this",
    is_staff: true,
    (etc...)
  }
}

Как вы можете видеть в verifiedLogin(), он вызывает другую функцию (в данном случае создателя действия), чтобы установить для пользователя объект user, возвращаемый моим API.setUser определен так:

const setUser = createAction(SET_USER);

, который должен создать Action как это:

{
  type: SET_USER,
  payload: {
    userdata...
  }
}

Редуктор определен так:

import { handleActions } from "redux-actions";
import { SET_USER } from "../constants/actionTypes";

export default handleActions(
  {
    [SET_USER]: (state, action) => action.payload
  },
  {}
);

Я знаю, что создатель действия правильный, как я подтвердил console.log(setUser(user));, но все, что находится в состоянии, является пустым объектом для пользователей.Я не могу определить, почему он не работает успешно.Я новичок в React и Redux, поэтому, может быть, я что-то не так понял.

Редактировать:

Это apiPayloadCreator:

const noOp = () => ({ type: "NO_OP" });

export const apiPayloadCreator = ({
  url = "/",
  method = "GET",
  onSuccess = noOp,
  onFailure = noOp,
  label = "",
  data = null
}) => {
  console.log(url, method, onSuccess, onFailure, label, data);
  return {
    url,
    method,
    onSuccess,
    onFailure,
    data,
    label
  };
};

Answer 1

Даже если вы звоните setUser, Redux не отправляет сообщение , что в конечном итоге выполняет редуктор и обновляет хранилище.Создатели действий, такие как setUser, не отправляются автоматически;это делается в connect HOC.Вам понадобится промежуточное ПО Redux, такое как redux-thunk , для отправки асинхронных / множественных действий.Ваш код может быть похож на приведенный ниже пример (с использованием redux-thunk):

export const verifyLogin = () => (dispatch) => {
  return verifyLoginAC({
    url: "/verify/",
    method: "POST",
    data: {
      token: `${
        localStorage.getItem("token")
          ? localStorage.getItem("token")
          : "not_valid_token"
      }`
    },
    onSuccess: (result) => verifiedLogin(dispatch, result),
    onFailure: (result) => diapatch(failedLogin(result))
  });
};

const verifiedLogin = (dispatch, data) => {
  const user = {
    ...data.user
  };
  dispatch(setUser(user));
  dispatch({
    type: IS_LOGGED_IN,
    payload: true
  });
};

Answer 2

Вам нужно будет использовать что-то вроде redux-thunk для выполнения асинхронных действий.См. документацию о том, как это сделать.