redux-promised-thunk 是一个便于管理 Redux 异步请求的 npm 包。本文将详细介绍该包的使用方法、用途及其高级功能。
安装
npm install redux-promised-thunk --save
用途
redux-promised-thunk 可以帮助你轻松管理 Redux 异步请求。在使用 Redux 接触到异步请求时，我们往往需要写一些繁琐的 Redux 中间件来管理异步操作。但是 redux-promised-thunk 利用 Promise 特性和 Redux Thunk 中间件，让异步请求的编写变得简单而高效。
示例代码
下面是一个使用 redux-promised-thunk 的示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------------- ---- -----------------------
------ -------- ---- -------------
-- -- ----- ----- --
----- ----- - ------------
---------
-------------------------------- ------------------
--
-- ---- ------
----- --------- - -- -- -
------ ---------- -- -
----------
----- -------------------
---
-- - ------- ---------- -------
------ -------------------------------------
---------------- -- ----------------
------------ -- -
----------
----- ---------------------
-------- -----
---
--
-------------- -- -
----------
----- ---------------------
-------- ------
---
---
--
--
-- ---- ------
----------------------------------- -- -
------------------------------
---上面代码中，我们首先引入了 redux、redux-thunk 和 redux-promised-thunk 中间件，并将它们作为 applyMiddleware 函数的参数传入，创建了 Redux store 对象。然后创建了一个 fetchData 异步 action，dispatch 了一个 FETCH_DATA_START action，接着在 Promise 中进行异步操作，并根据异步操作的结果分别 dispatch FETCH_DATA_SUCCESS 或 FETCH_DATA_FAILURE action。最后，我们调用 store.dispatch 方法来发送异步 action，使用 then 方法来在异步 action 完成之后打印函数运行结束时的 store 数据。
redux-promised-thunk 的高级用法
redux-promised-thunk 除了基本的异步请求之外，还有一些高级用法。比如，我们可以在调用异步 action 时，传入一个 extraParams 参数，以便在异步操作中使用它。我们只需要在创建异步 action 时，接收 extraParams 并在 Promise 中使用即可：
-- -------------------- ---- -------
----- --------- - ------------- -- -
------ ---------- -- -
----------
----- -------------------
---
-- - ------- ---------- -------
------ ----------------------------------------------------------------
---------------- -- ----------------
------------ -- -
----------
----- ---------------------
-------- -----
---
--
-------------- -- -
----------
----- ---------------------
-------- ------
---
---
--
--
---------------------------------------------- -- -
------------------------------
---上面代码中，我们新增了一个接收 extraParams 参数的 fetchData 异步 action，然后在 Promise 中使用了该参数，在 fetch url 中传递了 testParam 参数。最后，我们在调用异步 action 时，通过传入参数的方式将 testParam 传递给 fetchData 异步 action。
总结
redux-promised-thunk 是一款非常优秀的 Redux 异步请求管理工具包。通过 Promise 特性和 Redux Thunk 中间件，它可以使 Redux 异步请求的编写变得简单高效。同时，它还提供了一些高级用法，例如传入 extraParams 参数，以便在异步操作中使用它。当你需要管理复杂异步请求时，redux-promised-thunk 肯定是一个好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d47