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

const setUser = createAction(SET_USER);

应该创建这样的动作：

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

Answer 1

您将需要使用redux-thunk之类的东西才能执行异步操作。有关如何操作，请参见the documentation。

Answer 2

即使您正在调用setUser，Redux也不会对其进行调度，而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
  });
};

未触发React-Redux操作

2 个答案: