什么是 reusable-redux-saga
reusable-redux-saga 是一个基于 redux 和 redux-saga 的 npm 包，它可以帮助我们简化 redux-saga 的开发，提高代码的可复用性和可维护性。
reusable-redux-saga 的主要功能包括：
- 自动启动和停止 saga，无需手动调用 start 与 stop。
- 自动为 saga 绑定 action，无需手动使用 take 或 takeEvery。
- 自动管理 saga 启动和停止的状态，无需手动管理状态变量。
- 可以通过配置文件自动为 saga 绑定 action 和启停状态，无需手动注册 saga。
如何使用 reusable-redux-saga
使用 reusable-redux-saga 可以分为两个步骤：
安装和配置 reusable-redux-saga。
使用 reusable-redux-saga 编写 saga。
安装和配置 reusable-redux-saga
首先，我们需要安装 reusable-redux-saga。
使用 npm 安装：
--- ------- -------------------
使用 yarn 安装：
---- --- -------------------
在项目中引入 reusable-redux-saga：
------ - ------------ - ---- ----------------------
接下来，我们需要配置 reusable-redux-saga。
首先，我们需要创建一个 sagas 文件夹，用于存放我们的 saga 文件。
然后，我们需要在项目中创建一个名为 sagas.js 的文件，用于配置 saga。
在 sagas.js 文件中，我们可以通过配置对象的方式管理所有的 saga：
----- ----------- - - -- ----- ---- --
在配置对象中，我们可以使用以下属性：
sagas: 一个数组，用于定义所有的 saga。reducerKey: 一个字符串，用于指定应用中保存 saga 状态的 reducer 的名称，默认为 'saga'.sagaKey: 一个字符串，用于指定 saga 的启停状态保存在 reducer 中的字段名称，默认为 'status'.actionHandlers: 一个对象，用于自定义 saga 处理 action 的方式，如果没有定义，则按照默认方式处理。
编写 saga
编写 saga 之前，我们需要先熟悉 redux 和 redux-saga 的基本使用方法。
在编写 saga 时，我们可以使用以下方式创建 saga：
-- -------
------ - ----- ---- ---------- - ---- ---------------------
--------- ------------------------ -
--- -
----- ------ - ----- ----------- --------------------
----- ----- ----- ------------------------------ -------- - ------ - ---
- ----- ------- -
----- ----- ----- --------------------------- -------- - ----- - ---
-
-
------ --------- ------- -
----- ------------------------------- ------------------
-在 reusable-redux-saga 中，我们可以更简单地创建 saga：
-- --------
------ ----- ----- - -
-
----------- --------------------
-------- --------- -------- -
-- --- ---- -----
--
--
--在上面的代码中，我们只需要定义一个包含 actionType 和 handler 两个属性的对象即可。其中，actionType 指定改 saga 处理的 action 类型，handler 是 saga 的处理函数。
使用 reusable-redux-saga 后，我们无需手动调用 start 和 stop 函数，无需手动调用 take 或 takeEvery 函数，也无需手动管理启停状态与绑定 action。我们只需要简单地定义一个对象，即可创建一个可复用的 saga。
一个使用示例
以下是一个使用 reusable-redux-saga 的示例：
-- --------
------ ----- ----- - -
-
----------- --------------------
-------- --------- -------- -
--- -
----- ------ - ----- ----------- --------------------
----- ----- ----- ------------------------------ -------- - ------ - ---
- ----- ------- -
----- ----- ----- --------------------------- -------- - ----- - ---
-
--
--
--
-- --------
------ - ------------ ---------------- --------------- - ---- --------
------ -------------------- ---- -------------
------ - ------------ - ---- ----------------------
------ - ----- - ---- ----------
----- ------------ - ---
----- -------- - --------------------
----- -------------- - -----------------------
----- ----- - ------------
---------
-------------
-------------------------------
--
----------------------------------------
------ ------- ------在上面的示例中，我们定义了一个处理 REQUEST_SOMETHING action 的 saga，并且使用 reusable-redux-saga 将 saga 注册到了 store 中。
使用 reusable-redux-saga 非常简单，只需要定义一个对象即可，它可以帮助我们管理 saga 的启停状态和绑定 action。如果我们需要添加新的 saga，只需要添加一个对象到 sagas 数组中，即可完成注册。
总结
reusable-redux-saga 可以帮助我们简化 redux-saga 的开发，提高代码的可复用性和可维护性。在使用 reusable-redux-saga 时，我们只需要定义一个对象即可创建一个可复用的 saga，无需手动调用 start 和 stop 函数，无需手动调用 take 或 takeEvery 函数，也无需手动管理启停状态与绑定 action。整个过程非常简单，大大提高了开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1f81e8991b448dac97