介绍
redux-semaphore 是一个基于 Redux 的状态管理库，旨在解决由于异步 actions 导致的状态更新过程中的顺序问题。它提供了一个回调函数让用户指定哪些 actions 是异步的，以及等待异步 actions 完成后执行的操作。
安装
在使用 redux-semaphore 时需要先安装它：
npm install redux-semaphore
使用
引入
在使用 redux-semaphore 时需要先引入它：
import { createStore } from 'redux';
import { applyMiddleware } from 'redux-semaphore';
const store = createStore(
// reducer,
applyMiddleware()
);注意，使用 redux-semaphore 时需要同时引入 applyMiddleware 函数，而不是原来的 redux 中的 applyMiddleware。
创建回调函数
使用 redux-semaphore 时需要创建一个回调函数，用来指定哪些 actions 是异步的，以及等待异步 actions 完成后需要执行的操作。回调函数接收一个参数 state，表示当前的状态；另外，还需要返回一个对象，对象的每个属性名表示一个 action，属性值表示该 action 是否是异步的。
比如下面的代码：
const semaphoreCallback = state => ({
asyncAction: true,
syncAction: false
});表示 asyncAction 是异步的，而 syncAction 不是异步的。
在 reducer 中使用
使用 redux-semaphore 时需要在 reducer 中使用 semaphoreReducer 来包裹原有的 reducer。semaphoreReducer 接收两个参数：原来的 reducer 和回调函数。
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------ ----- --------- - ------- ------- -- - -- --- -- ----- ----- - ------------ --------------------------- ------------------ --
注意，使用 semaphoreReducer 包裹原来的 reducer 时需要注意顺序，先传入原来的 reducer，再传入回调函数。
在 action 中使用
使用 redux-semaphore 时需要在 action 中调用 wait 函数等待异步操作完成。wait 函数接收两个参数：要等待的 action 和一个回调函数，回调函数在异步操作完成后被调用。
比如下面的代码：
-- -------------------- ---- ------- ----- ----------- - ----- -------- -- - ---------- ----- -------------------- --- ----- --------------------- -- -------- ---------- ----- --------------------- --- -- ----- ------------------- - -- -- - -- ------------- -- ---------------------------- ----------------------
表示等待 asyncAction 完成后执行 handleAsyncComplete。
示例代码
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- - ---- ------------------
------ - ----------------- ---- - ---- ------------------
------ - ------------------ - ---- ----------
----- ------------ - -
---------- ------
----- --
--
----- --------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ - --------- ---------- ---- --
---- -------------------
------ - --------- ---------- ------ ----- -------------- --
--------
------ ------
-
--
----- ----------------- - ----- -- --
--------- ----
---
----- ----- - ------------
--------------------------- -------------------
-----------------
--
----- -------- - ----- -- -- -
---------------- ----- ----------------- ---
----- ---- - ----- ---------------------
---------------- ----- ------------------- -------- ---- ---
--
----- ---------------------- - -- -- -
----------------------
--
------------------------------- -------------------------
-----------总结
redux-semaphore 是一个能解决 Redux 中异步 actions 导致的状态更新顺序问题的工具库。在使用时需要先创建一个回调函数来指定哪些 actions 是异步的，等待异步 actions 完成后需要执行的操作；然后在 reducer 和 action 中使用相应的函数来包裹原来的 reducer 和 dispatch 函数，即可解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8afd