redux-reducer-side-effects 是一个用于处理 Redux 副作用的 npm 包。它可以让你更方便的在 Redux 中处理异步请求、处理本地存储等副作用。本篇文章将介绍其使用教程，包括安装、基本使用和高级应用。
安装
可以通过 npm 进行安装：
npm install redux-reducer-side-effects
基本使用
redux-reducer-side-effects 的核心是处理 Redux 的副作用，因此我们需要将其与 Redux 结合使用。下面是一个最简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- - ---- --------
------ -------------------------- ---- -----------------------------
-- -- -------
-------- -------------- ------- -
------ ------------- -
---- -----------
------ -
---------
----- --------------
--
--------
------ ------
-
-
-- ---------
-------- ------------------------ ------- --------- -
---------------------------- ----------------
-
-- -- ----------
----- -------------------- - ----------------------------
--------- -----------------
---
-- -- -----
----- ----- - ------------
--------
- ----- ---------------------------- --
-------------------------------------
--
-- -- ------
---------------- ----- ----------- -------- ------- ---在上面的示例中，我们通过 createSideEffectMiddleware 创建了 Middleware，并且将其与 store 进行了结合。在 Middleware 中我们传入了一个对象，键名是 Action type，键值是副作用处理函数。当我们 dispatch 含有 SET_NAME type 的 action 时，就会自动调用 setNameSideEffect 函数，这样就可以处理副作用了。
高级应用
处理异步请求
在 Redux 中处理异步请求是非常常见的需求，redux-reducer-side-effects 提供了便捷的方式。
首先，我们需要安装 redux-thunk：
npm install redux-thunk
然后，在 Middleware 的创建中加入 redux-thunk：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ -------------------------- ---- ----------------------------- ------ --------------- ---- -------------- ----- -------------------- - ---------------------------- --- --- ----- ----- - ------------ -------- ------------- -------------------------------- --------------------- --
接着，在副作用处理函数中继续 dispatch 异步请求相关的 Actions：
-- -------------------- ---- -------
-------- -------------------------- ------- --------- -
---------- ----- ------------------ ---
-------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- ------ ---- ---
---
-处理多个副作用
有时候一个 Action 需要处理多个副作用时，我们可以将所有的副作用处理函数放在一个数组中传入 Middleware：
const sideEffectMiddleware = createSideEffectMiddleware({
SET_NAME: [setNameSideEffect, setNameToServerSideEffect]
});处理副作用与 Reducer
redux-reducer-side-effects 与 Redux 的 Reducer 是并行运行的，如果我们需要处理 Reducer 修改后的结果再去处理副作用，可以调用 dispatch 的回调函数：
function setNameToServerSideEffect(state, action, dispatch) {
dispatch(setNameToServerInAPI(action.payload)).then(data => {
// do something with data
});
}处理副作用间依赖
有时候一个副作用需要依赖另一个副作用执行完之后才能执行。我们可以将这些副作用放在一个数组中，通过 allSettled 函数保证它们按序执行：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------------
-------- ------------------------------- ------- --------- -
----- ----------- - -
---------------------------------
----------------------------------------
--------------------------------------
--
------ ------------------------------- -- -
-- -- --------- ----- --- ---- ------- --- -------
---
-总结
redux-reducer-side-effects 提供了方便处理 Redux 副作用的方法，让我们更容易地处理异步请求、本地存储等操作。希望本篇文章对你有所帮助，如果你在使用过程中有任何疑问或建议，欢迎在评论区交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5981e8991b448db200