redux-promises-concluder 是一个 Redux 的中间件，用于在异步操作中处理多个 Promise，方便将多个 Promise 转化为一个结果作为 Redux 的数据。本文将介绍如何使用这个 npm 包。
安装
npm install redux-promises-concluder --save
添加到 Redux 中
添加 redux-promises-concluder 中间件到 Redux 中需要进行如下步骤：
- 导入 redux-promises-concluder
import promisesConcluder from 'redux-promises-concluder';
- 在创建 middleware 的时候添加 promisesConcluder
const middleware = applyMiddleware(
promisesConcluder // 添加 promisesConcluder 中间件
);- 组合 middleware
const store = createStore(
rootReducer,
initialStore,
middleware
);使用
redux-promises-concluder 将一个 Promise 序列转化为一个结果。这个结果通过对应的 Action 发送给 Redux，让你在消费某类 Promise 的时候保持代码的简洁。
在 Redux 中，我们定义的 Action 通常会指定一个 type，例如：
export const LOGIN_USER_REQUEST = 'LOGIN_USER_REQUEST'; export const LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS'; export const LOGIN_USER_FAILURE = 'LOGIN_USER_FAILURE';
当用户发起登录时，我们创建一个请求 action：
const loginUserRequest = () => ({
type: LOGIN_USER_REQUEST
});登录成功时，我们创建一个成功 action：
const loginUserSuccess = (user) => ({
type: LOGIN_USER_SUCCESS,
user
});登录失败时，我们创建一个失败 action：
const loginUserFailure = (error) => ({
type: LOGIN_USER_FAILURE,
error
});一个登录流程中，有三个 Promise：
const loginRequest = axios.post('/api/login', data);
const validateUserRequest = axios.get('/api/validateUser', user);
const getUserDataRequest = axios.get('/api/userData', user);我们可以对这些 Promise 进行如下处理：
-- -------------------- ---- -------
----- ----- - ---------- -- -
----------------------------- -- ------ ------
-------------------------- -------------------- --------------------
---------------- -- -
--------------------------------------------- -- ----
--
-------------- -- -
---------------------------------- -- ----
---
--使用 redux-promises-concluder，我们可以将代码改为如下形式：
-- -------------------- ---- -------
----- ----- - ---------- -- -
--------------------------- -
-
------- ----------------- -- ------ ---------
-------- ------------ -- ------- ------
--
-
------- -----------------
-------- ------------------- -- ------- ------
--
-
------- -----------------
-------- -------------------
-------- ---------- -- ------------- -- ------- ---- ------ ----
-
---
--示例代码
下面是一个完整的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ---------------------------
-- -- ------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ---------------- - -- -- --
----- ------------------
---
----- ---------------- - ------ -- --
----- -------------------
----
---
----- ---------------- - ------- -- --
----- -------------------
-----
---
-- -- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
------------ ----
--
---- -------------------
------ -
---------
------------ ------
----- -----------
--
---- -------------------
------ -
---------
------------ ------
------ ------------
--
--------
------ ------
-
--
-- --------- -----------------
----- ----- - ---------- -- -
----- ---- - -
--------- -----------
--------- ----------
--
----- ------------ - ------------------------ ------
----- ------------------- - ------------------------------ ------
----- ------------------ - -------------------------- ------
--------------------------- -
-
------- -----------------
-------- ------------
--
-
------- -----------------
-------- -------------------
--
-
------- -----------------
-------- -------------------
-------- ---------- -- -------------
-
---
--
-- -- ----- -----
----- ---------- - -----------------------------------
----- ----- - -------------------- --- ------------
-- ---- -------- -----
----------------------总结
redux-promises-concluder 是一个非常实用的 Redux 中间件，在处理多个 Promise 的时候非常有用，将代码简化了很多。以上便是 npm 包 redux-promises-concluder 的使用教程，希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d53