在前端开发中，Redux 是一种非常流行的状态管理库。而在 Redux 中，处理异步操作是一个相对麻烦的问题。为了解决这个问题，我们可以使用 redux-promise-middleware 这个 NPM 包。
安装
要安装 redux-promise-middleware，只需要运行以下命令：
--- ------- ------------------------
用法
假设你已经创建了一个 Redux store，在该 Store 中有一个 todos 的 reducer，用于管理待办事项的列表。如果你想要通过 API 获取待办事项并将其添加到列表中，你可以按照以下步骤进行配置：
首先，在你的 action creator 中，你可以返回一个 Promise，这个 Promise 将在数据获取完成后被解析为带有数据的 action 对象。例如：
-------- ------------ -
------ ---------------
-------------- -- ----------------
---------- -- --
----- --------------
-------- -----
----
-然后，你需要在创建 Store 时使用 redux-promise-middleware。具体地说，你需要使用 applyMiddleware 函数，并传递 promiseMiddleware 作为参数，如下所示：
------ - ------------ --------------- - ---- -------- ------ ----------------- ---- --------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------------------- --
现在，当你调用 fetchTodos action creator 时，该函数将返回一个 Promise，而不是一个普通的 action 对象。当这个 Promise 被解析时，它将包含在 Store 中作为数据的 payload，并且可以被 reducer 处理。
最后，在你的 reducer 中，你可以检查 action 是否带有一个 payload 字段，如果有，则说明该 action 是一个由 redux-promise-middleware 处理过的异步 action。例如：
-------- ----------- - --- ------- -
------ ------------- -
---- ------------------------
------ -----------------------------
--------
------ ------
-
-在这个 reducer 中，我们使用了 action.type 来判断是否是我们想要处理的 action。如果是，我们就将 action.payload 添加到当前状态中，以便更新待办事项列表。
总结
通过使用 redux-promise-middleware，我们可以轻松地处理 Redux 应用程序中的异步操作。它使得我们能够更方便地编写 action creators 和 reducers，从而提高了代码的可读性和可维护性。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34812