在现代的 Web 应用中，异步操作已经变得越来越普遍。一个典型的例子就是在向服务器请求数据时，很少立即收到响应。而在 React 应用中，由于单向数据流的限制，使得将异步操作和其它状态管理方式整合在一起不是那么容易。 这里我们就来介绍 Redux 和 React 结合使用时的异步操作的最佳实践。
Redux 和 React 的结合方式
Redux 是一个用于 JavaScript 应用的可预测状态容器，它帮助我们管理一系列的状态。Redux 与 React 配合使用，可以让你建立一个更加一致而且容易理解的应用，特别是在处理异步操作的方面。
在 Redux 中，我们把应用程序的状态存储在一个称为 store 的中心数据存储区中。这个 store 对象包含了应用程序中所有的状态。通过 dispatch actions，我们可以更新这些状态数据。而在 React 中，可以通过 React Redux 库连接 React 和 Redux，使得应用程序的状态管理更加得心应手。
Redux-thunk 中间件的使用
Redux-thunk 是一个为 Redux 设计的中间件，使得 dispatch 一个 Function 类型的 action 变得可用。这个 action 返回了一个函数，在函数内部处理异步操作。
下面是使用 Redux-thunk 中间件加载一个远程数据的示例：
------ ----- ---- -------------------
------ -------- ----------- -
------ ------------------ -
------ ------------------
-------------- --
---------- ----- -------------- -------- ------------- ---
--
--
-这个 action creator 不是 action 对象，它返回一个函数，这个函数实际上做了异步请求并触发一个普通的同步 action。在这个函数中，我们通过 dispatch 一个 action 对象来表示异步请求的成功，并且将数据作为 payload 参数传递给这个 action。
使用 React-Redux 的 connect 方法
在 Redux 中，我们通过 connect 方法连接 React 组件和 Redux，并且在组件的 props 中包含了 store 中的状态和 action creators。
下面是一个加载远程数据的容器组件的示例：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -
----------------------------
--
-
-
----- --------------- - ----- -- --
----- -----------
---
----- ------------------ - -------- -- --
---------- -- -- ----------------------
---
------ ------- ------------------------ ---------------------------------在这个示例中的 MyComponent 容器组件，我们这么做：
- 在组件的 componentDidMount 生命周期中发起异步请求。
- 将 store 中的 state 映射到组件的 props 中。
- 将 action creators 映射到组件的 props 中。
这样做，我们就可以在组件内部通过 props 来使用属于 Redux 的状态和行为。
结论
通常情况下，Redux 和 React 的结合使用相对于传统的 React，虽然添加了更多的代码和改变了项目的结构，但是 Redux 能够更好地管理和共享状态和异步操作。希望这篇文章对你有所启发，让你可以在 Redux 和 React 中针对性地处理异步操作。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673448df0bc820c582481ac5