介绍
redux-promise-middleware-global-action是一款用于简化Redux开发中异步action创建的包。它允许你同时发出多个异步操作，使用的是Redux Promise Middleware功能，并且允许在全局或局部（具有作用域的）Redux store中使用。它还提供了处理异步操作的默认配置选项，如超时和自定义标志，并提供了Redux状态的自动更新。
安装
要使用redux-promise-middleware-global-action，我们需要先安装它：
npm install --save redux-promise-middleware-global-action
使用方法
导入redxu-promise-middleware-global-action包
import ReduxPromiseMiddlewareGlobalAction from 'redux-promise-middleware-global-action';
将ReduxPromiseMiddlewareGlobalAction库作为Redux middleware添加到Redux store中：
import { createStore, applyMiddleware } from 'redux'; import ReduxPromiseMiddlewareGlobalAction from 'redux-promise-middleware-global-action'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(ReduxPromiseMiddlewareGlobalAction) );
全局使用
在全局Redux store中使用Redux-promise-middleware-global-action包，它会为所有异步action添加 PENDING, FULFILLED and REJECTED三种状态。使用方法如下：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ------- - ---------------------------
------ ----- -------------- - -------------------------------- -- -- -
------ --------------------------------- -
-------- --- ---------
-------------- ------- -------
--
--
-------------- -- ----------------
---
在此示例代码中创建了一个异步action getUserProfile()，当dispatch该action时，redux-promise-middleware-global-action会确保action始终处于PENDING、FULFILLED、REJECTED三种状态其中之一。
-- -------------------- ---- ------- -- ------- - ----- -------------------------- - -- --------- - ----- ----------------------------- -------- -- - -- -------- - ----- ---------------------------- -------- -- -
局部使用
在局部Redux store中使用Redux-promise-middleware-global-action包，它将提供两个方法 createPromiseAction 和 createScopedPromiseAction。您可以使用这些方法创建promise actions。
createPromiseAction
createPromiseAction是一个创建promise actions的方法。它的用法与Redux中的createAction非常相似。目前，所有的Promise actions都将显示一个默认的 PENDING, FULFILLED 或 REJECTED 状态。
-- -------------------- ---- -------
------ - ------------------- - ---- -----------------------------------------
----- -------------------- - --------------------------------------- -- -- -
------ --------------------------------- -
-------- --- ---------
-------------- ------- -------
--
--
-------------- -- ----------------
---
在这个示例代码中，我们使用 createPromiseAction 创建一个异步action getUserProfileAction，在dispatch该action时，redux-promise-middleware-global-action会确保action始终处于PENDING、FULFILLED、REJECTED三种状态其中之一。
-- -------------------- ---- ------- -- ------- - ----- -------------------------- - -- --------- - ----- ----------------------------- -------- -- - -- -------- - ----- ---------------------------- -------- -- -
createScopedPromiseAction
createScopedPromiseAction是一个创建局部promise actions的方法。它将创建一个作用域，该作用域中所有的创建的promise actions都将被打上该作用域的名称。
-- -------------------- ---- -------
------ - ------------------------- - ---- -----------------------------------------
----- --------- - ----------------------------------
----- -------------- - ----------------------------- -- -- -
------ --------------------------------- -
-------- --- ---------
-------------- ------- -------
--
--
-------------- -- ----------------
---
----- ------------- - --------------------------- ------- -- -
------ --------------------------------- -
-------- --- ---------
-------------- ------- -------
---
------- ------
----- ---------------- ------- --
--
-------------- -- ----------------
---
在该代码示例中，我们定义了一个userScope的作用域，然后使用该作用域定义两个promise actions。
当dispatch getUserProfile 或 updateProfile actions时，这些actions将被打上'user'作用域的标记。
配置
该库提供了一个配置接口，可以对异步操作的默认参数进行设置，默认配置如下：
- timeout：10,000;
- identifier：undefined;
- allowMultiple：false;
在你创建store对象时，你可以调用一个带有自定义属性的ReduxPromiseMiddlewareGlobalAction方法，并将其传递给applyMiddleware()，示例代码如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ---------------------------------- ---- -----------------------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
------------------------------------
-------- -----
----------- -----------------------
-------------- ----
--
-
--在这个代码示例中，我们配置了一个5000毫秒的超时时间，在使用redux-promise-middleware的异步actions中添加了一个自定义的标识符，并允许同时执行多个异步操作。
结论
以上是redux-promise-middleware-global-action的使用详解，它可以很好的简化Redux开发中异步的操作，使我们的代码更加轻巧，代码结构也更加清晰易懂。它是很多Redux开发者的首选异步工具，如果您是Redux开发的初学者，可以考虑使用它来优化您的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d2c