在前端开发中，使用 Redux 管理状态是一种非常常见的方式。然而，在实际开发过程中，我们经常会遇到需要异步处理数据的场景。而使用同步的 Redux Reducer 往往是无法胜任这个任务的。这时候，我们需要使用异步的 Redux Reducer 来进行状态管理。
而 npm 包 make-reducer-async 就是一个非常实用的工具。它使得编写异步的 Redux Reducer 变得非常简单易行。本文将介绍如何使用这个 npm 包，以及在项目中实践几个示例。
make-reducer-async 的基本原理
在介绍使用教程之前，我们先来了解一下 make-reducer-async 的基本原理。
make-reducer-async 实际上是一个高阶函数。它接收一个原始的 Redux Reducer 函数作为参数，并返回一个新的函数——也就是异步的 Redux Reducer 函数。
这个新函数接收两个参数：原始的 state 和 action。在内部它可以执行异步操作（例如发送 Ajax 请求），然后根据最终的结果返回新的 state。
使用这种方式定义异步的 Redux Reducer，可以让我们的代码变得非常简单优雅。不再需要手写各种不同的 action 和处理异步操作的代码，而只需要像平常一样处理同步的 action 即可。
安装和使用 make-reducer-async
首先，我们需要使用 npm 安装 make-reducer-async：
npm install make-reducer-async
然后，在项目中 import makeReducerAsync 函数，并使用它对原始的 reducer 进行包装：
-- -------------------- ---- -------
------ ---------------- ---- ---------------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -------
------ - --------- ------------ ---- --
---- -------------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ------------ - --------------------------可以看到，我们在使用 makeReducerAsync 包装 reducer 的时候不需要传入任何参数。这是因为 makeReducerAsync 只需要知道原始 reducer 函数的签名（即接收两个参数：state 和 action），就可以自动创建一个异步的 reducer 函数。
最后，我们将创建好的异步 reducer 导出，以供应用程序使用：
export default asyncReducer;
实践示例：在 Redux 中发起 Ajax 请求
下面我们来看一下如何在异步 reducer 中发起 Ajax 请求，并将请求结果更新到 state 中。
发起请求
首先，我们需要使用一个 action 来触发异步请求。这个 action 可以向 reducer 发送请求，但是这时候 reducer 并不能直接更新 state，因为它还没有获取到请求结果。
因此，我们需要在 action 中发起异步请求，并在请求成功后再向 reducer 发送一个新的 action，以通知 reducer 更新 state。
我们可以使用 fetch API 来发起 Ajax 请求。以下是一个简单的异步 action 示例：
-- -------------------- ---- -------
----- --------- - -- -- ----- ---------- -- -
--- -
----- ------ - ----- -------------------
----- ---- - ----- --------------
---------- ----- --------------------- -------- ---- ---
- ----- ----- -
---------- ----- --------------------- -------- ----------- ---
-
--这个 action 会发起一个 GET 请求，获取 /api/data 的数据，并将获取到的数据发送给 reducer，最后更新 state 中的数据。
更新 state
接下来，我们需要更新 reducer 的实现，以处理上面定义的 FETCH_DATA_SUCCESS action。在 action 被触发时，reducer 应该将获取到的数据更新到 state 中。
下面是一个示例：
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -------
------ - --------- ------------ ---- --
---- ---------------------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ------------ - --------------------------这里我们添加了一个新的 case，处理我们刚刚定义的 FETCH_DATA_SUCCESS action。在处理这个 action 时，reducer 会将获取到的 data 更新到 state 中。
整合到 Redux 应用程序中
现在只需要将我们创建好的异步 reducer 整合到 Redux 应用程序中就可以了。
下面是一个简单的示例：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ------------ ---- -------------------------- ----- ------------ - --- ----- ---------- - --------------------------------- ----- ----- - ------------------------- ------------- ------------ ------ ------- ------
在这个示例中，我们使用了 Redux 的 createStore() 函数创建了一个 store，store 中包含了异步 reducer 返回的新函数，也就是用 makeReducerAsync 包装过的 reducer。
总结
到此为止，我们已经学会了使用 make-reducer-async 包装 Redux Reducer，以处理异步操作的场景。
通过使用 make-reducer-async，我们可以将处理异步操作的代码封装到 reducer 中，从而使其更易于维护和修改。
使用示例中的 Ajax 请求示例，也可以看出，在使用 make-reducer-async 之后，代码的可读性和复用性都得到了很大程度的提升。
当然，make-reducer-async 并不是适用于所有场景的解决方案。在一些复杂的场景中，我们可能需要手写异步操作的代码以更好地满足需求。但是，在很多简单的场景中，使用 make-reducer-async 可以起到很好的优化效果。
最后，当我们使用 make-reducer-async 时，一定要注意性能问题，避免过多的网络请求导致我们的应用程序变得缓慢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005646781e8991b448e16e3