Redux 是一个流行的 JavaScript 应用程序的状态容器，应用程序的状态都存储在一个全局存储区中。然而，Redux 中所有的状态修改都是同步进行的，在某些情况下，我们需要实现异步操作，这就是 Redux-Sagas 要解决的问题。Redux-Sagas 是一个用于管理 Redux 应用程序的副作用的库，允许我们使用像异步 API 调用和 WebSocket 这样的副作用。
本文将介绍一个针对 Redux-Sagas 的 npm 包，redux-sagas-injector-forked，该插件可以让我们更加方便地配置 Sagas 并轻松管理副作用。本文将详细介绍如何使用这个插件，并提供示例代码。
安装和配置
在终端中运行
npm install redux-sagas-injector-forked，安装 redux-sagas-injector-forked 插件。在你的 Redux 应用程序的主文件中导入 redux-sagas-injector-forked。
import createSagaMiddleware from "redux-saga"; import { createInjectSagasStore } from "redux-sagas-injector-forked"; // 创建 saga 中间件 const sagaMiddleware = createSagaMiddleware();调用 createInjectSagasStore 函数生成新的应用程序存储器。
const store = createInjectSagasStore({ reducers, sagas });这里的
reducers是由 Redux 形式的 reducers 共同组成的对象，类似于combineReducers(reducers)。sagas是一个数组，包含要添加到 Redux-Sagas 的 Saga 生成器函数。然后将 sagaMiddleware 作为 applyMiddleware 的参数来创建 Redux store。
const store = createStore(reducers, applyMiddleware(sagaMiddleware));
注意：这里的 createStore 应该采用 createInjectSagasStore 函数。
在应用程序中编写 Sagas 并将它们添加到 sagas 数组中。
-- -------------------- ---- ------- --------- --------------- - --- - ----- ----- - ----- --------------------- ----- ----- ----- ---------------------- ----- --- - ----- ------- - ----- ----- ----- ---------------------- ----- --- - - ------ ------- --------- ---------- - ----- ----------------------------- ----------------- -这是一个示例 Saga（fetchUserSaga），它尝试调用一个名为
fetchUsers的 API。如果调用成功，它会派发一个FETCH_USERS_SUCCESS动作，如果调用失败，则会派发一个FETCH_USERS_FAILURE动作。然后将所有 Sagas 组合到一个根 Saga 中(rootSaga)。在 sagaMiddleware 中运行 rootSaga。
sagaMiddleware.run(rootSaga);
使用
一旦 Redux store 已经使用 createInjectSagasStore 函数创建并且 Sagas 已经添加到应用程序中，我们就可以开始向应用程序中注入新的 Sagas。这个工作非常简单，只需要调用 store.injectSaga(saga, key)，其中的 saga 是你想要添加到应用程序中的 Saga 生成器函数，key 是一个字符串，代表你的 Saga 的名称。
示例代码：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ---------------------- - ---- ------------------------------ ------ -------------------- ---- ------------- ------ ------------ ---- ------------- ------ --------- ---- ---------- ----- -------------- - ----------------------- -- -- ---------------------- ----------- ----- ----- - ------------------------ --------- ------------- ------ ---------- --- -- -- ---------- --- ---- -------- ----------------------------- --------------- -- --- ----- ------ ---------------- ----- ------------ ---
总结
redux-sagas-injector-forked 是一个非常方便的 npm 包，它可以让我们更容易地配置 Sagas 并管理异步操作。在本文中，我们介绍了如何安装和配置此 npm 包，并提供了一个示例，说明如何向 Redux 应用程序中注入新的 Sagas。我相信这篇文章可以为开始使用 Redux-Sagas 的开发者提供指导意义，同时让经验丰富的开发人员更加深入地了解 Redux-Sagas 整合方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac668c4