React / Redux - 异步操作无需使用 thunk

Question

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

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

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

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

Answer 1

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

• 当请求正在进行时，不同的 React 组件应该显示加载动画

• 您想在某处跟踪所有 api 错误响应

• 用户注册后，想要触发其他不相关资源的请求

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