简介
redux-promise-track 是一个 Redux 中间件，可以帮助开发者跟踪解决 Redux thunk 代码中的 promise 操作，并生成 action 以表明它们何时开始和完成。
安装
使用 npm 安装：
$ npm install redux-promise-track --save-dev
快速开始
- 在 Redux store 的 middleware 链中引入该中间件：
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-track';
const store = createStore(
reducer,
applyMiddleware(promiseMiddleware)
);- 创建类型为 promise 的 action：
const fetchUser = () => {
return {
type: 'FETCH_USER',
payload: axios.get('/user/1')
};
};- 对于其它类型的 action，需要手动添加 meta 属性来启用 promise 跟踪：
-- -------------------- ---- -------
----- ---------- - ------ -- -
------ -
----- --------------
-------- --------------------- ------
----- -
-------- ----
-
--
--- 添加一个处理 action 的 reducer：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------------------- -
---- ---------------------
-- -- ------- -----
------ ------
---- -----------------------
-- -- -----
------ --------------------
---- ----------------------
-- ------
------ ------
-- -- ------
--------
------ ------
-
--额外功能
redux-promise-track 可以通过在 action 对象的 meta 属性中添加 onPending, onFulfilled 和 onRejected 以在 promise 完成后进行额外的处理。
-- -------------------- ---- -------
----- --------- - -- -- -
------ -
----- -------------
-------- ---------------------
----- -
---------- -- -- -----------------------
------------ -- -- -------------------------
----------- -- -- -----------------------
-
--
--示例代码
下面是一个完整的 Redux 应用示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ - --------- ------- - ---- --------------
------ ----------------- ---- ----------------------
------ ----- ---- --------
----- --------- - -- -- -
------ -
----- -------------
-------- ---------------------
----- -
---------- -- -- ------------------ ---- ----------
------------ -- -- ------------------ ---- ------------
----------- -- -- ------------------ ---- ----------
-
--
--
----- ---------- - ------ -- -
------ -
----- --------------
-------- --------------------- ------
----- -
-------- -----
---------- -- -- ------------------- ---- ----------
------------ -- -- ------------------- ---- ------------
----------- -- -- ------------------- ---- ----------
-
--
--
----- ------- - ------ - --- ------- -- -
------------------- -
---- ---------------------
------ ------
---- -----------------------
------ --------------------
---- ----------------------
------ ------
---- ----------------------
------ ------
---- ------------------------
------ --------------------
---- -----------------------
------ ------
--------
------ ------
-
--
----- ----- - ------------
--------
----------------------------------
--
----- --------------- - ----- -- -
------ -
----- -----
--
--
----- ------------------ - -------- -- -
------ -
---------- -- -- ----------------------
----------- ------ -- --------------------------
--
--
----- --- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -
-----
---------------------------------
------- ----------- -- ----------------------- ----- ---- ----- ----
------ ----
---------
------
--
-
-
----- ------------ - ------------------------ -------------------------
----------------
--------- --------------
------------- --
------------
-------------------------------
--总结
通过了解使用 redux-promise-track 这个 npm 包的方法，我们可以轻松地追踪并限制 Redux thunk 的 promise 操作，并使我们的代码更可靠。谢谢关注本文，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d45