随着 React 技术的普及，越来越多的前端开发者开始使用 redux 来管理应用的状态。然而，redux 的 middleware 模式在处理业务逻辑时不太友好，需要开发者手动处理异步操作、副作用等复杂场景，降低了开发效率。为了解决这个问题，社区推出了许多 redux middleware，其中 redux-simple-effects 就是一款非常实用的工具，它可以帮助开发者轻松地处理副作用和异步操作。
redux-simple-effects 简介
redux-simple-effects 是一个通过 reducer 和 effects 处理副作用的工具库，可以让开发者处理网络请求、本地存储等副作用。与其他中间件不同，redux-simple-effects 将副作用逻辑转移到 reducer 中处理，使代码组织更加清晰，易于维护。
redux-simple-effects 的特点：
- 副作用逻辑不再阻塞 reducer，不会影响其他 action 的执行顺序
- 编写副作用逻辑时，可以直接在 reducer 中将一个 Promise 对象返回，将副作用处理逻辑与 reducer 分离
- 具有出色的错误处理能力，能够捕获副作用函数产生的错误，以及派发错误 action
安装和配置
使用 npm 安装 redux-simple-effects 即可：
npm install --save redux-simple-effects
在 Redux Store 的创建过程中，使用 applyMiddleware 方法将 redux-simple-effects 注入中间件即可。具体配置代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------- ---- ----------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------------ -- ------ ------- ------
副作用逻辑的处理
redux-simple-effects 最大的特点就是将副作用逻辑放到 reducer 中处理，具体的方式是使用 effects 函数。effect 是一个副作用类型，每一个 effect 都应该是一个 generator 函数，返回一个 Promise 实例。在 effect 函数中可以执行 ajax 请求、本地存储等操作，以及派发 action。
redux-simple-effects 提供了多种 effect 函数类型，如 call、put、select、take 等，下面具体介绍其中的几种。
call
call 函数是 redux-simple-effects 最常用的 effect 函数，它用于调用异步方法。call 函数接收一个函数作为参数，该函数执行完成后，返回一个 Promise 对象，call 函数会等待该 Promise 对象 resolve 后再继续执行后续逻辑。
下面是使用 call 函数调用 Fetch API 的示例：
import { call } from 'redux-simple-effects';
function* fetchProducts() {
const response = yield call(fetch, '/api/products');
const products = yield call([response, 'json']);
yield put({ type: 'LOAD_PRODUCTS_SUCCESS', payload: products });
}在上面的代码中，使用 call 函数调用 fetch 请求，等待服务器响应后，再使用 call 函数解析响应的数据，并派发 LOAD_PRODUCTS_SUCCESS action。
put
put 函数用于派发一个普通 action，可以用在 effect 函数中，表示异步操作已经完成，并将异步操作的结果作为 payload 传递给 reducer。在 put 函数中还可以使用 delay、cancel 等函数控制派发 action 的行为。
下面是一个查询用户信息的示例，使用 put 函数调用异步方法并派发 action：
-- -------------------- ---- -------
------ - ----- --- - ---- -----------------------
--------- --------------------- -
--- -
----- ---- - ----- ------------------------- --------
-- ------ -
----- ----- ----- --------------------- -------- ---- ---
- ---- -
----- ----- ----- --------------------- ------ ----- --- ------ ---
-
- ----- ------- -
----- ----- ----- --------------------- ----- ---
-
-在上面的代码中，使用 call 函数调用 UserApi 的 getUserById 方法，获取用户数据。如果查询成功，使用 put 函数派发 FETCH_USER_SUCCESS action，如果查询失败，派发 FETCH_USER_FAILURE action。
select
select 函数用于从 Redux Store 中获取状态值。在 effect 函数中，可以使用 select 函数获取 state 中的数据，进行后续计算或操作。
下面是一个花式计数器的示例，使用 select 函数获取当前状态中的 count 值：
-- -------------------- ---- -------
------ - ----- ---- ------ - ---- -----------------------
--------- --------------- -
----- ----- - ----- ------------ -- -------------
-- ------ - - --- -- -
----- ------------
----- ----- ----- ----------- ---
- ---- -
----- ----- ----- ----------- ---
-
-在上面的代码中，使用 select 函数从 state 中获取 count 值，如果 count 值为偶数，则延迟 1s 后再派发 INCREMENT action，否则直接派发 INCREMENT action。
实践体验
上述示例代码均为一个简化示例，实际的项目中，redux-simple-effects 可以帮助开发者更好地处理异步操作、副作用等复杂场景，同时解决了异步操作和副作用的处理方式，使代码更加易于维护和扩展。
-- -------------------- ---- ------- -- -------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ------- ---- ----------------------- ------ ------ ---- --------------- ------ ------- ---- ------------ ----- ----------- - ----------------- ------- --- ----- ----- - ------------ ------------ ------------------------ ------- -- ------ ------- ------
-- -------------------- ---- -------
-- ----------
------ ----- --------- - -- -- -- ----- ----------- ---
------ ----- --------- - -- -- -- ----- ----------- ---
------ --------- ---------------------- --------- -
----- - ------- - - -----------
-- -------- - - --- -- -
-------
-
----- --------------------
-
--------- ----------------------- --------- -
----- -----------------------
----- -------------------
----- --------------------
-
------ --------- ------------ -
----- ------------------------------------ -----------------
-
------ ------- -------- ------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-需要使用 redux-thunk 的场景，可以使用 redux-simple-effects-thunk 代替，它完全兼容 redux-thunk 的方式使用：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ --------------------- ---- ----------------------------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ----- -------------- - ----------------------- ----- --------------- - ------------------------ ----- ----- - ------------ ------------ -------------------------------- --------------- --
总结
通过本文介绍，我们已经了解了 redux-simple-effects 的安装、配置方法及其使用方式，掌握了 call、put、select 等 effect 函数的使用方法，实践了一个简单的计数器案例，相信读者对于 redux-simple-effects 已经有了一定的了解。
redux-simple-effects 让我们无需手动处理异步操作、副作用等复杂场景，仅需编写纯洁的 reducer 函数，把逻辑集中在 effect 中，让代码更加清晰，维护难度降低，使用效率也更高。同时，redux-simple-effects 也和其他中间件兼容，具备广泛的适用性。大家可以在项目中实践一下，相信可以有不错的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bcf81e8991b448d96d9