Javascript 未触发React-Redux操作

我将

React

与

React-redux、redux和redux操作一起使用

我有一个操作，用于获取存储在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（）
中所看到的，它正在调用另一个函数（在本例中为action creator），以将用户设置为my API返回的用户对象。setUser的定义如下：

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

const setUser=createAction（设置用户）

这将创建如下操作：

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

我知道action creator是正确的，正如我通过
console.log（setUser（user））验证的那样但对于用户来说，所有处于该状态的对象都是空的。我无法确定它为什么不能成功工作。我是一个新的反应和重复，所以这可能是我误解的东西

编辑：

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

您需要使用类似于
redux-thunk
的方法来执行异步操作。请参阅如何完成此操作。
为了执行异步操作，您需要使用类似于
redux-thunk
的方法。请参阅如何执行此操作。
即使您正在调用
setUser
，它也不会被Redux调度，而Redux最终会执行reducer并更新存储。像
setUser
这样的动作创建者不会自动连接起来进行调度；这是在
connect
HOC中完成的。您将需要一个Redux中间件，例如调度异步/多个操作。然后，您的代码可以类似下面的示例（使用redux thunk）：

即使您正在调用
setUser
，它也不会被Redux调度，而Redux最终会执行reducer并更新存储。像
setUser
这样的动作创建者不会自动连接起来进行调度；这是在
connect
HOC中完成的。您将需要一个Redux中间件，例如调度异步/多个操作。然后，您的代码可以类似下面的示例（使用redux thunk）：

老实说，汤姆，我有点困惑。看起来，
redux-thunk
允许您使用函数而不是动作对象，但我只是尝试返回动作对象。redux在设计上是同步的。它不会等待响应。它要求立即返回对象
{type:…，payload:…}
，而不是
承诺
：。因此，您需要使用一些中间件来处理异步操作（最终解析为返回
object
s），正如Redux文档中所解释的：老实说，Tom，我有点困惑。看起来，
redux-thunk
允许您使用函数而不是动作对象，但我只是尝试返回动作对象。redux在设计上是同步的。它不会等待响应。它要求立即返回对象
{type:…，payload:…}
，而不是
承诺
：。因此，您需要使用一些中间件来处理异步操作（最终解析为返回
object
s），正如Redux文档中所解释的：不幸的是，这不起作用。我可以在redux logger中看到动作火，但它有一种未定义的类型？我研究了redux thunk，但我仍然感到困惑。对不起，在查看我的代码示例后，我发现我调用的verifiedLogin参数不正确。我已经更新了我的示例，将dispatch作为参数传递。不幸的是，没有运气。当我从api中间件中
console.log（action）
时，它正在接收函数，就像操作返回
verifyLoginAC（{…}）
。我还试着先应用thunk中间件，但它根本就不会启动。。。尝试将
dispatch
参数从
verifyLogin
行的第一组括号移动到第二组括号，如更新的示例所示。这就是我在度假时输入代码示例的结果，我的大脑被关闭了。如果这对您不起作用，我将编写一个更完整的CodeSandbox示例。我编写了一个快速的可执行示例，使用redux thunk和您问题中的函数名。您仍然会看到redux logger记录了内部函数，但是redux thunk截取了该函数，并以
dispatch
和
getState
作为参数调用它。在CodeSandbox示例中，您将看到如何将此原始函数记录为操作，并在随后不久将操作传递到
dispatch
。不幸的是，这不起作用。我可以在redux logger中看到动作火，但它有一种未定义的类型？我研究了redux thunk，但我仍然感到困惑。对不起，在查看我的代码示例后，我发现我调用的verifiedLogin参数不正确。我已经更新了我的示例，将dispatch作为参数传递。不幸的是，没有运气。当我从api中间件中
console.log（action）
时，它正在接收函数，就像操作返回
verifyLoginAC（{…}）
。我还试着先应用thunk中间件，但它根本就不会启动。。。尝试将
dispatch
参数从
verifyLogin
行的第一组括号移动到第二组括号，如更新的示例所示。这就是我在度假时输入代码示例的结果，我的大脑被关闭了。如果这对您不起作用，我将编写一个更完整的CodeSandbox示例。我编写了一个快速的可执行示例，使用redux thunk和您问题中的函数名。您仍然会看到redux logger记录了内部函数，但是redux thunk截取了该函数，并以
dispatch
和
getState
作为参数调用它。在CodeSandbox示例中，您将看到如何将此原始函数记录为操作和