在前端开发中，Redux 是一个广泛使用的状态管理库。但是，Redux 在处理异步操作方面有一定的局限性。为了解决这个问题，redux-saga 基于 ES6 的 generator 提供了一种优雅的方式来管理 Redux 应用程序中的异步操作。而 redux-saga-middleware 是一个基于 redux 和 redux-saga 的中间件，通过简化 redux-saga 的使用，使得开发者能够更快速地编写和维护 Redux 应用程序。
安装
使用 npm 包管理工具进行安装：
npm install redux-saga-middleware --save
集成
使用 redux-saga-middleware 需要在 createStore 的时候使用 applyMiddleware 中间件进行集成。具体的，可以通过以下代码进行集成：
-- -------------------- ---- -------
-- ------
------ - ------------ --------------- - ---- -------
------ -------------------- ---- ------------
------ - ---------------- -- ------------------------- - ---- -----------------------
------ -------- ---- ---------
------ ----------- ---- ------------
-- -- ---- ---- ----- ---- ---------- ---
----- -------------- - ----------------------
----- ------------------- - ---------------------------
-- -- -----
----- ----- - ------------
------------
----------------
---------------
--------------------
--
-
-- -- ----
----------------------------
-- -- -----
------ ------- -----在 redux-saga-middleware 中，reducer 和 saga 只有一次实例化，创建 store 之后，直接在 middleware 中生成并设置两者的实例。同时，redux-saga-middleware 把所有传进来的 action 包装成 function，通过 redux-saga 实现异步操作。
使用
中间件选项
在使用 redux-saga-middleware 时，我们需要在 createMiddleware 函数中传入三个参数。具体的，可以通过以下代码创建 middleware：
import { createMiddleware } from 'redux-saga-middleware'
const middleware = createMiddleware({
whitelist: ['action_name'],
onActionDispatched: (action) => action,
onActionCancelled: (action) => action,
})其中，createMiddleware 接受一个对象作为参数，并支持以下属性：
whitelist: 一个包含字符串的数组，它限制了哪些 action 会被改写。默认情况下，将会替换原始的 action。onActionDispatched: 由受影响的 action 触发的回调函数。onActionCancelled: 由受影响的 action 触发的回调函数。在这里，我们可以对被取消的请求进行一些额外的处理操作。
使用 Redux 插件
redux-saga-middleware 也提供了一个 Redux DevTool 插件，通过它我们可以在我们的应用中方便地跟踪 action 和 effect 的生命周期、查看 store 的状态等。具体用法如下：
-- -------------------- ---- -------
------ - -------------------- - ---- ------------
------ - ----------------- ---------------- - ---- -----------------------
-- ------
----- ---------- - ---------------------------------------
----- -------------- - ----------------------
----- ----- - ------------
------------
--------------------
----------------
-----------
---------------
--
------------------
----- ----- -- --- -------------
---------- --------- -- -
-- ------------- --- ---------- -- -------------------- --- ----------------- -
---------------- ---- ------- -------------------------------
-
-
---
-
-这里我们首先创建了一个 Redux DevTool 插件的实例 devToolsEnhancer，然后在创建 createStore 时，将其作为 composeWithDevTools 的参数之一传入。
示例
我们假设我们需要使用 redux-saga-middleware 来处理一个简单的异步操作。
定义 Action 类型
export const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST' export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS' export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE'
定义 Action Creator 对象
-- -------------------- ---- ------- ------ ----- ---------------- - --------- -- -- ----- ------------------- -------- -- ------ ----- ---------------- - --------- -- -- ----- ------------------- -------- -- ------ ----- ---------------- - --------- -- -- ----- ------------------- -------- --
定义 State 对象和 Reducer
-- -------------------- ---- -------
----- ------------ - -
------ ---
---------- ------
------ -----
-
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
---------- -----
-
---- -------------------
------ -
---------
---------- ------
------ ---------------
-
---- -------------------
------ -
---------
---------- ------
------ ---------------
-
--------
------ -----
-
-定义 Saga
-- -------------------- ---- -------
------ - ---- --------- - ---- --------------------
------ - ------------------- ----------------- ---------------- - ---- -----------
--------- ----------- -
--- -
----- -------- - ----- -------------------------------------
-- -------------- -
----- --------------------------
-
----- ----- - ----- ---------------
----- ----------------------------
- ----- ------- -
----- ------------------------------------
-
-
--------- ---------- -
----- ----------------------------- ----------
-
------ ------- --------将 Saga 注入到 Root Saga 中
-- -------------------- ---- -------
------ - --- - ---- --------------------
------ -------- ---- ------------
--------- ---------- -
----- -----
-----------
--
-
------ ------- --------使用 Action Creator 发起请求
-- -------------------- ---- -------
------ - ----------- - ---- -------------
------ - ---------------- - ---- -----------
-------- ----- -
----- -------- - -------------
----- ---------- - -- -- -
----------------------------
-
-- ---
-这样，当用户触发 fetchUsers 函数，就会发起一个异步的获取用户信息请求，并通过 dispatch 方法将 FETCH_USER_REQUEST action 发送到 Store 中。Redux middleware 会将其转换成处理异步函数的函数，并最终通过 FETCH_USER_SUCCESS 或 FETCH_USER_FAILURE 更新应用程序的状态。这样我们就完成了一个基础的异步应用。
总结
在本文中，我们介绍了 redux-saga-middleware，它是一个通过简化 redux-saga 的使用，提高开发者的开发效率和团队维护效率的中间件。我们讲解了 redux-saga-middleware 的安装和集成、选项和插件的使用，以及通过示例代码展示了如何在 Redux 应用中使用 redux-saga-middleware 来管理异步操作。希望这篇文章对于使用 Redux 应用的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d381e8991b448d4df3