在 React 的开发过程中，不可避免地需要执行一些副作用（例如异步请求数据、访问本地存储等）。而这些副作用会使得代码变得难以维护和测试。Redux-saga 是一个基于 Redux 的中间件，它可以帮助我们管理这些副作用，使代码更加可靠和可测试。
什么是 Redux-saga
Redux-saga 提供了一种新的方式来处理副作用。传统的 Redux 流程是：组件 -> action -> reducer，其中 reducer 是纯函数，只能返回一个新的状态。而 Redux-saga 相当于在 reducer 前加入一个拦截器。如果 action 需要执行一个异步操作，我们可以在 saga 中处理。saga 首先捕获 action，然后执行异步操作，等待异步操作完成后再派发一个新的 action，这个新的 action 再传入 reducer 来更新状态。
举例来说，我们有一个需要异步加载数据的组件，它的实现可能如下所示：
----- ----------- ------- --------------- -
------------------- -
-------------------------------- -- ----------------
---------- -- -
-----------------------------
--
-
-------- -
------ -
-----
--------------------------- ------ -- -
---- -----------------------------
---
------
-
-
-
----- --------------- - ----- -- --
----- ----------
--
----- ------------------ - -------- -- --
------------- ---- -- --------------- -------------- -------- ------
---
------ ------- --------
----------------
------------------
---------------在组件的 componentDidMount 方法中，我们使用 fetch 函数来异步获取数据，并在获取成功后派发一个 DATA_LOADED action，将数据传递给 reducer。但是这样有几个问题：
- fetchData 信任了 Action 的名字和结构，将来不好维护
- fetchData 代码中间的 promise 里看不出这个 promise 都干了哪些事情，以及它处理的是哪个动作里的异步数据
Redux-saga 的解决方案
使用 Redux-saga，我们可以将上面的代码改成如下形式：
------ - ----- ---- --------- - ---- --------------------
--------- ----------------- -
--- -
----- ---- - ----- ----------- ------------
----- ----- ----- -------------- -------- ---- --
- ----- --- -
--------------
-
-
--------- ---------------- -
----- ----------------------- ----------
-
------ ------- --------- ---------- -
----- -----
----------------
--
-在上述代码中，我们定义了两个 saga，一个是 fetchData，它会利用 call 函数来异步获取数据，获取成功后再派发一个 DATA_LOADED action；另一个是 watchFetchData，它会监听 FETCH_DATA action，并在监听到 FETCH_DATA action 时调用 fetchData。
我们需要在应用的中心 store 中配置 rootSaga，并将它绑定到应用中心 store 上，这样 Redux-saga 才能正常工作。
------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- -----------------------------
此时，我们在组件中只需要派发一个 FETCH_DATA action，就可以触发异步操作：
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -
-----
--------------------------- ------ -- -
---- -----------------------------
---
------
-
-
-
----- --------------- - ----- -- --
----- ----------
--
----- ------------------ - -------- -- --
---------- -- -- --------------- --------------
---
------ ------- --------
----------------
------------------
---------------Redux-saga 的特点
- 易于测试：saga 是一个普通的 JavaScript 对象，它只接收 pure action 并且只产生 pure action，这意味着我们可以轻松地测试 saga。
- 易于调试：saga 相对来说更容易调试，因为每个 saga 都像一个独立的线程，有自己的生命周期和状态。
- 与 Redux 打通：saga 是 Redux 的一个插件，它们能够很好地相互协作，使代码更加清晰和易于维护。
- 可以轻易地取消异步调用：通过使用 generator，我们可以轻松地取消一个异步调用，这在某些情况下非常有用。
总结
Redux-saga 提供了一种新的处理副作用的方式，可以使代码更加可靠和可测试。通过监听 action 并使用 generator 函数达到了异步调用的效果，不仅解决了之前纯函数无法执行副作用的问题，而且还兼顾了可测试性。同时 Redux-saga 还具备易于调试以及与 Redux 很好地打通的特点。希望本文的介绍能够帮助前端开发者更好地理解并应用 Redux-saga。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653505ec7d4982a6ebae15e1