前言
在现代的前端开发中，处理异步操作是一个必要的技能。Redux 是一个流行的状态管理库，常常被用来处理复杂的前端状态。但是，Redux 的一个缺点就是处理异步操作比较麻烦。通常需要编写大量的 action 和 reducer，使得代码冗长难懂。为了解决这个问题，redux-promise-reducer 这个 npm 包应运而生。
redux-promise-reducer 是一个 Redux 中间件，它可以自动处理异步操作。在这篇文章中，我们将介绍如何使用 redux-promise-reducer 来简化 Redux 应用中的异步编程。
安装
使用 npm 或 yarn 安装 redux-promise-reducer：
npm install --save redux-promise-reducer
或者
yarn add redux-promise-reducer
用法
下面我们来看一个基本的示例，使用 redux-promise-reducer 加载一些数据。
首先，我们需要定义一个 action：
import { createAction } from 'redux-promise-reducer'; export const loadData = createAction('LOAD_DATA', () => { return fetch('/api/some/data').then(response => response.json()); });
这个 action 返回一个 Promise，Promise 中的数据会成为 action 的 payload，然后被传递给 reducer。
接下来，我们需要定义 reducer：
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------------ ----- ------------ - - ---------- ------ ----- ----- ------ ----- -- ------ ----- ----------- - --------------------------- - ---------- - ------------ - ------ - --------- ---------- ----- ------ ---- -- -- ----------- - -------- ---- -- - ------ - --------- ---------- ------ ---- -- -- ------------ - -------- ----- -- - ------ - --------- ---------- ------ ----- -- -- -- ---展开代码
这个 reducer 处理 "LOAD_DATA" action，根据 action 的状态返回一个新的 state。当 action 开始执行时，isLoading 设置为 true，error 设置为 null。当 action 执行成功时，isLoading 设置为 false，data 被设置为 action 的 payload。当 action 执行失败时，isLoading 设置为 false，error 被设置为 action 的 payload。
最后，我们需要使用 applyMiddleware 函数来启用 redux-promise-reducer 中间件。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ----------- - ---- ------------- ------ --------------- ---- -------------- ------ - -------------- - ---- ------------------------ ----- ----- - ------------ ------------ -------------------------------- --------------- --展开代码
这里我们还使用了 redux-thunk 中间件，因为 redux-promise-reducer 仅仅处理异步 action，同步 action 还需要使用 redux-thunk 中间件来处理。
高级用法
redux-promise-reducer 支持很多高级功能，比如：
Action 的参数
除了以上例子中使用的无参数 Action，还可以传递参数。
export const loadUserData = createAction('LOAD_USER_DATA', userId => { return fetch(`/api/user/${userId}`).then(response => response.json()); });
这里的 action 接收参数 userId，然后根据参数来加载不同的数据。
最小化 reducer 中的代码
使用纯函数可以让 reducer 中的代码变得简单清晰，但是，当我们想要编写更简单的 reducer 时，可以直接返回一个对象，而不用编写纯函数。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------------ ----- ------------ - - ---------- ------ ----- ----- ------ ---- -- ------ ----- ----------- - --------------------------- - ------------ ----- -- -- --------- ---------- ---- --- ---------------------- ------- - -------- ---- -- -- -- --------- ---------- ------ ---- --- --------------------- ------- - -------- ----- -- -- -- --------- ---------- ------ ----- --- ---展开代码
这段代码会把 action 的类型和 reducer 中的属性直接对应起来。
处理并发请求
有时候，我们需要同时发出多个异步请求，在这种情况下，可以使用 redux-promise-reducer 的 withPromise reducer。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------------ ----- ------------ - - ------ ----- ------ ----- ---------- ------ ------ ----- -- ------ ----- ----------- - -------------- ------------- - ------------- ------------- -- - ------------ ----- ---------------- ------- - ------ - --------- ------------------ ---------- ------ ------ ---- -- -- --------------- ------- - ------ - --------- ---------- ------ ------ -------------- -- -- ------------ - ------ - --------- ---------- ---- -- -- - --展开代码
在这个示例中，我们定义了两个 action：LOAD_DATA1 和 LOAD_DATA2，并共用统一的 reducer（因为它们有相同的状态，且返回相同的状态类型）。我们使用 withPromise 选项启用了一个特殊的 reducer，它会等待两个 action 都执行完毕，然后返回它们的 payload。我们也定义了 start 和 rejected 函数来处理这些 action 的状态。
结论
使用 redux-promise-reducer 可以使得 Redux 开发变得更加简单和直观。它可以减少代码量，同时也可以让你的异步操作更清晰和易读。当你需要处理异步操作时，强烈推荐使用 redux-promise-reducer。
完整示例代码：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------------ ------ - ------------- - ---- ------------------------ ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ - -------------- - ---- ------------------------ -- -- ------ -- ------ ----- -------- - ------------------------- -- -- - ------ ------------------------------------- -- ----------------- --- -- -- ------- -- ----- ------------ - - ---------- ------ ----- ----- ------ ----- -- ------ ----- ----------- - --------------------------- - ---------- - ------------ - ------ - --------- ---------- ----- ------ ---- -- -- ----------- - -------- ---- -- - ------ - --------- ---------- ------ ---- -- -- ------------ - -------- ----- -- - ------ - --------- ---------- ------ ----- -- -- -- --- -- -- ----- -- ----- ----- - ------------ ------------ -------------------------------- --------------- --展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d2e
