Redux-Saga 是一个 Redux 中间件，用于处理异步副作用（如网络请求和访问本地存储）并在应用程序中进行分离和测试。除了 Redux-Saga，还有许多其他的异步中间件可用，例如 Redux-Thunk 和 Redux-Observable。然而，Redux-Saga 表现出更好的可读性和可维护性，因为它使用了异步操作的生成器函数，而不是传统的回调函数或 Promise。
安装和设置 Redux-Saga
首先，你需要使用 npm 安装需要的包。可以使用以下命令：
npm install redux redux-saga react-redux
要使用 Redux-Saga，需要通过创建一个中间件并将其传递给 Redux store 来将其集成到 Redux 中。为此，需要使用 createStore() 方法和 applyMiddleware() 方法。此外，还需要使用 redux-saga 提供的 run() 方法来运行 Saga 中间件。
以下是基本的设置：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- -------------- ------ -------- ---- ----------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- -----------------------------
上面的代码中，我们首先导入必要的库和模块。接下来创建了一个 Saga 中间件实例。然后，我们创建了 Redux store，并将 Saga 中间件注册到其中。最后，我们运行了 rootSaga，而 rootSaga 是 Saga 配置文件中的一个导出函数，它将包含所有 Sagas 的列表。
使用 Saga 处理副作用
现在我们已经配置好了中间件，现在开始编写 Saga 来处理异步副作用。假设我们正在编写一个简单的购物车应用程序，我们想要从服务器上获取商品的价格列表。在这种情况下，我们需要使用 Saga 处理网络请求并将产品列表添加到 Redux state 中。
这就是我们将要编写的 Saga：
-- -------------------- ---- -------
------ - ----- ---- ---------- - ---- ---------------------
------ - ------------- - ---- ---------------------------
------ - ------------------------ ----------------------- - ---- -------------
------ --- ---- ---------
--------- ------------------------ -
--- -
----- -------- - ----- ------------------------ ----------------
----- ----------- - --------------
----- ------------------------------------------
- ----- ------- -
----- ------------------------------------
-
-
------ ------- --------- ---------------------- -
----- ---------------------------------------------------- ------------------
-首先，我们使用 redux-saga/effects 导入必要的 Saga Effect。因为我们使用异步 API 获取数据，所以我们将使用 call() Effect。此外，我们还需要使用 try-catch 块处理可能的错误。
在代码的主体部分，我们使用 call() Effect 调用 api.getProductList() 函数，并使用 action 中载荷的参数作为其唯一参数。接下来，我们提取 API 响应中的数据并将其存储在 productList 变量中。如果一切顺利，我们将使用 put() Effect 触发 fetchProductListSuccess 派发函数并将 productList 作为参数传递。否则，我们将调用 put() Effect 且传递错误消息。
然后，我们使用 takeLatest() Effect 启动 Sagas，其中我们将引用 SHOPPING_CART.FETCH_PRODUCT_LIST_REQUEST 动作类型，并传递我们刚刚创建的 Saga 处理程序函数 fetchProductList() 作为第二个参数。
集成 Redux-Saga
最后，我们需要将我们的 fetchProductListSaga() Saga 集成到 Redux。为此，我们需要在 Saga 配置文件中创建并导出 rootSaga 函数，该函数将包含所有我们想要在应用程序中启动的 Sagas。
-- -------------------- ---- -------
------ - --- - ---- ---------------------
------ -------------------- ---- -------------------------
--------- ---------- -
----- -----
----------------------
---
-
------ ------- ---------在上面的示例中，我们导入了一个名为 all() 的 Saga Effect，该 Effect 允许我们以数组的形式运行多个 Saga。在 rootSaga() 函数中，我们使用 all() Effect 启动我们的 fetchProductListSaga()。
示例代码
完整的购物车示例代码可以在 GitHub 上找到：Redux-Saga-React-Native-Shopping-Cart。
总结
Redux-Saga 是一种用于处理异步副作用的优秀方案。相较于其他异步中间件，Redux-Saga 使用生成器函数提高了代码的可读性和可维护性。在本文中，我们介绍了如何将 Redux-Saga 集成到 React Native 应用程序中，并通过一个实际示例了解了使用 Saga 处理副作用的基本原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469ef67968c7c53b09b682d