Redux 是一个流行的 JavaScript 应用程序状态管理库，它使用单一不可变状态（global state）来管理一个应用程序的状态。Redux 库提供了一个简单、预测性的数据流方案，轻松解决了应用程序状态管理的复杂性问题。但 Redux 默认不支持异步 Actions，这导致开发者不得不使用一些第三方中间件来支持异步 Actions。本文将带你深入了解 Redux 异步 Action 的方案及实践。
Redux 异步 Action
在 Redux 应用中，每个 Action 是一个纯 JavaScript 对象，用来描述一个刻板的应用状态变化。Redux 支持三种不同 Action 类型：同步、异步和 Promise。
在 Redux 中，异步 Actions 使用 Thunk 中间件进行处理，而 Thunk 写起来比较麻烦，因此 Redux 库的作者 Dan Abramov 在 Redux 2.0 中引入了 redux-thunk 中间件来简化异步 Actions 的处理。
redux-thunk 中间件使用一个特殊的 Action Creator 函数来处理异步 Actions。这个特殊的 Action Creator 函数返回一个函数，这个函数执行异步操作并返回另一个 Action Creator 函数。这个 Action Creator 函数被 Redux Store 安排为下一个 Action，可以异步地更新 Store 中的状态。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
-------- ---------------- -
------ -------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
-
----- ----- - ------------
---------------
--------------------------------
--
---------------------------------Redux Saga 异步处理方案
redux-thunk 中间件虽然简洁易用，但也不够直观和强大。redux-saga 中间件则是更加可读可编写的 Redux 异步方案，并且使用起来也很流畅。
Redux Saga 是一个 Redux 中间件，它提供了一种简单但功能强大的方式来处理 Redux Action 的异步调用。Saga 是一个 Generator 函数，包含一些特殊的巨集函数（effects）来执行异步操作，或者等待 Redux Actions，并对其进行拦截和控制。实际上，Saga 是另一个事件循环，当 Redux Action 被触发时，Saga 接收到 Action 并响应，调用函数将 Action 转化为 State。
以下是一个使用 redux-saga 中间件的示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ----- ---- --------- - ---- ---------------------
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
--------- ---------------- -
----- ----------- ------
----- ----- ----- ----------- ---
-
--------- --------------------- -
----- ---------------------------- ----------------
-
----- -------------- - -----------------------
----- ----- - ------------
---------------
-------------------------------
--
----------------------------------------
---------------- ----- ----------------- ---Redux Thunk 和 Redux Saga 对比
redux-thunk 中间件虽然在解决异步 Action 问题上比较成熟，但是它有些缺点：1）Thunk Action Creator 函数的写作方式有点麻烦；2）Thunk Action Creator 函数只能处理简单的异步 Action；3）Thunk Action Creator 函数不是 Generator 函数，所以无法使用 try…catch...finally 来处理错误。
相比之下，Redux Saga 更加直观和易于编写，它支持 Generator 函数，具有更好的容错机制，可以处理各种复杂的异步 Action。但是，Redux Saga 的学习成本比较高，需要掌握 Generator 函数和分布式软件架构的基本原理。
总结
Redux 的状态管理方案在实践中已被广泛使用。在异步处理方面，Redux 使用 redux-thunk 和 redux-saga 中间件，两者都支持基本的异步 Action，但在易用性、可读性、可扩展性等方面存在一些差异。开发者在实际项目中应该根据需求选择合适的方案。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f90bf980a9b385b8fd473