前言
redux 是一个 JavaScript 应用程序的状态管理库，可以帮助我们更好地组织和管理状态。但是，当我们的应用程序变得庞大时，往往会面临许多难以处理的问题，例如异步 action 顺序不一致、action 可能被重复触发等等。这时，我们就需要一个好的解决方案。redux-enqueue 就是一个很好的解决方案。
什么是 redux-enqueue
redux-enqueue 是一个用于管理异步 action 顺序和重复触发的 npm 包。它提供了一个中间件，可以将用户发起的 action 排队，直到前面的 action 处理完毕再进行处理，并且还可以处理重复 action 的问题，例如在短时间内多次点击按钮等。
安装
要使用 redux-enqueue，我们需要先安装它。我们可以通过 npm 在我们的项目中安装它：
npm install --save redux-enqueue
使用
安装完成后，我们需要在项目中引入 redux-enqueue：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ - ---------------- - ---- ---------------- ------ ----------- ---- ------------- ----- ---------- - ------------------- ----- ----- - ------------ ------------ ---------------------------- --
在上面的代码中，我们首先从 redux 中引入了 applyMiddleware 和 createStore 方法，然后从 redux-enqueue 中引入了 createMiddleware 方法和 rootReducer。接着，我们创建了一个 middleware 并将其引用了到了 createStore 方法的第二个参数中。
API
createMiddleware()
创建一个 middleware 实例。
enqueue(action: Action)
将要执行的 action 排队。
replace(action: Action)
将相同 type 的前一个 action 替换为当前 action。
cancel(type: string)
取消前面所有未执行的相同 type 的 action。
示例
下面是一个示例，我们在其中使用了 redux-enqueue。
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ - ---------------- - ---- ---------------- ------ ----------- ---- ------------- ----- ---------- - ------------------- ----- ----- - ------------ ------------ ---------------------------- -- ---------------- ----- ----------------- --- ---------------- ----- ----------------- --- ---------------- ----- ----------------- --- ----- ----- - -------------- -- - ---------------- ----- ----------------- --- -- -----
在上面的代码中，我们首先引入了 createStore、applyMiddleware、createMiddleware 和 rootReducer。接着，我们创建了一个 middleware 并将其应用到 createStore 中。然后，我们通过 store.dispatch 分别推送了三个 action，其中每一个都是异步的。最后，我们使用 setInterval 每隔一秒钟推送一个 INCREMENT_ASYNC action。
在这个例子中，我们可以很清楚地看到，每个 INCREMENT_ASYNC action 的执行都是按照它们被推送的顺序进行的，即使在短时间内多次点击按钮也不会导致 action 的重复执行。
总结
redux-enqueue 是一个非常好用的 npm 包，它可以帮助我们处理异步 action 顺序和重复触发的问题。在实际开发中，我们可以根据实际需求，合理地使用 redux-enqueue。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c6a