React-Redux操作未被触发

Posted 2021-05-05

我正在使用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()中看到的那样，它调用另一个函数（在这种情况下是一个动作创建者）来将用户设置为我的API返回的用户对象。 setUser的定义如下：

const setUser = createAction(SET_USER);

应该像这样创建一个Action：

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

reducer的定义如下：

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
  };
};

答案

即使您正在调用setUser，它也不会被Redux调度，这最终会执行reducer并更新商店。像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
  });
};

另一答案

您将需要使用redux-thunk之类的东西来执行异步操作。请参阅the documentation了解如何完成此操作。