redux-promise-thunk 是一个用于处理异步操作的 Redux 中间件。它以 Promise 为基础，支持基于 Promise 的异步操作，并且对于多级嵌套的异步操作也能够有效处理。本文将详细介绍 redux-promise-thunk 的使用方法，并通过实例代码讲述 Redux 中如何使用这个中间件。
安装
使用 npm 安装 redux-promise-thunk：
npm install --save redux-promise-thunk
引入
在 Redux 应用中引入 redux-promise-thunk，并在 store 中使用：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ - ------------------ - ---- ---------------------
----- ----- - ------------
--------
----------------
----------------
--------------------
-
-其中，createPromiseThunk() 函数用于创建 Promise-based 的 thunk。因为 redux-thunk 已经提供了基于函数的 thunk，所以需要用到两个中间件：thunkMiddleware 和 createPromiseThunk()。
使用
使用 redux-promise-thunk 中的 Promise-based 的 thunk，需要将 action creator 改造成返回 Promise。例如：
-- -------------------- ---- -------
-------- ------------- -
------ ---------- --------- -- -
---------- ----- --------------------------
------ -------------------------------------
---------------- -- ----------------
------------ -- -
----------
----- -------------------------
-------- ----
--
------ ----
--
-------------- -- -
----------
----- -------------------------
------ ------------- -- ---------- ---- ------
--
----- -----
--
-
-以上代码中，getTodoList 函数接受 dispatch 和 getState 作为参数，并异步调用返回一个 Promise。在 dispatch 中发起 LOAD_TODO_LIST_REQUEST 的 action，表示开始加载，然后在成功或失败后分别 dispatch LOAD_TODO_LIST_SUCCESS 或 LOAD_TODO_LIST_FAILURE 的 action。这个函数可以直接放在组件中 dispatch 调用，也可以放在 mapDispatchToProps 中将它转化成 props。以 mapDispatchToProps 为例：
import { bindActionCreators } from 'redux'
import { getTodoList } from '../actions/todoActions'
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ getTodoList }, dispatch)
})以上使用 bindActionCreators 将 getTodoList 转成了 props.actions.getTodoList 函数，然后在组件中就可以直接使用 props.actions.getTodoList() 调用。
注意事项
使用 redux-promise-thunk 时需要注意以下几点：
在 action creator 中需要返回 Promise，以便中间件识别。
Redux 中间件的顺序需要先应用 thunkMiddleware，后应用 createPromiseThunk()。因为 thunkMiddleware 能够处理返回函数的 action creator，而 createPromiseThunk() 只能处理返回 Promise 的 action creator，因此需要先执行 thunkMiddleware。
Promise-based thunk 的执行顺序与 Promise 的执行顺序有关，如果需要按顺序执行多个 Promise，可以使用 async/await 等 Promise 处理方式。
示例代码
一个简单的待办事项 Redux 应用，使用 redux-promise-thunk 来处理异步操作的示例代码：
-- -------------------- ---- -------
-- ----------------------
------ -------- ----------- ------ -
------ -
----- ----------------
-------- - ---- -
-
-
------ -------- -------------- ---- -
------ -
----- -------------------
-------- - -- -
-
-
------ -------- ------------ -- -
------ ---------- --------- -- -
---------- ----- --------------------------
------ -------------------------------------
---------------- -- ----------------
------------ -- -
----------
----- -------------------------
-------- ----
--
------ ----
--
-------------- -- -
----------
----- -------------------------
------ ------------- -- ---------- ---- ------
--
----- -----
--
-
-
-- -----------------------
------ ------- -------- ----------- ------ - --- ------- -
------ ------------- -
---- ----------------
------ -
---------
- --- ------------ - -- ----- -------------------- ---------- ----- -
-
---- -------------------
------ -------------- -- ------- --- ----------------- - - -------- ---------- --------------- - - -----
---- -------------------------
------ --
---- -------------------------
------ --------------
---- -------------------------
------ --
--------
------ -----
-
-
-- ----------------------
------ ------ - --------- - ---- -------
------ --------- ---- ------------
------ - ------- - ---- -------------
------ - ------------------ - ---- -------
------ - ------------ --------------- ------------ - ---- ------------------------
-------- --------------- -
------------ -- -
----------------------------
-- ---
----- ------- - -- -- -
----- ---- - -----------------
-- ------ -
-------------------------------
-
-
------ -
-----
-------------
----
------------------------ -- -
--- --------------
------ --------------- ------------------------ ------------ -- -------------------------------------- --
-----------
-----
---
-----
------- -----------------------------
------
-
-
------------------ - -
--------- ---------------------------
-------- ---------------------------
-
----- --------------- - ----- -- --
--------- --------------
--
----- ------------------ - -------- -- --
-------- -------------------- ------------ --------------- ------------ -- ---------
--
------ ------- ------------------------ -----------------------------总结
通过 redux-promise-thunk，我们可以方便地处理 Redux 应用中的异步操作。它的基于 Promise 的 thunk 方式让我们不再需要手动处理异步 action 的 dispatch 顺序，同时还提供了错误处理等功能。当然，使用 redux-promise-thunk 也有注意事项需要遵守。我们需要确保返回的 action creator 返回一个 Promise，中间件的顺序需要正确，同时，Promise 的执行顺序需要注意。我们使用一个简单的待办事项应用作为例子，演示了如何使用 redux-promise-thunk 编写 Redux 应用。希望这篇文章能够帮助你理解和使用 redux-promise-thunk。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d31