React / Redux - 异步操作在不使用 thunk 的情况下工作答案

【问题标题】：React / Redux - async action is working without using thunkReact / Redux - 异步操作在不使用 thunk 的情况下工作
【发布时间】：2020-03-24 11:56:10
【问题描述】：

我最近在我的项目中尝试了一些东西，我很惊讶它成功了。我所做的是：-

let result = {};
Axios.post("/auth", newUser).then(res => {
  // console.log(res);
  result = res.data;
  this.props.signupUser(result);
});

上面的代码是写在 react 表单的 onSubmit 事件处理程序中的。我想从 POST 请求中获取响应并将响应存储在 redux 存储中，我尝试了上面的代码并且它有效。结果存储在 redux 存储中。所以我的问题是这应该有效吗？如果是，那么 redux thunk 的目的是什么？

signupUser 是一个简单的动作创建器，一个返回普通对象的函数，变量newUser 是一个包含表单数据的对象。

【问题讨论】：

你让你的异步和在你调用 redux 之后......使用 thunk 你可以调用 redux 并且在 reducer 内部使事情异步

标签： reactjs redux thunk

【解决方案1】：

thunk 的目的是让您更好地控制异步操作。当您的代码有效时，请考虑一些更高级的要求：

一个不同的 React 组件应该在请求进行时显示加载动画
您想在某处跟踪所有 api 错误响应
用户注册后，你想触发其他无关资源的请求

Thunk 以更方便的方式促进了所有这些事情。您还可以在任何时候使用 getState 在 thunk 操作中查看当前的 redux 状态。一般来说，最好将关注点分开：React 组件显示一个注册表单并与 redux 操作相关联。这些操作负责 api 请求和数据处理。没有什么能阻止你在 React 组件中编写所有代码，但在更大的应用程序中，这将很快失控。

【讨论】：