简介
redux-worker-apply 是一个优秀的 npm 包，用于在 Redux 应用中实现串行化处理的 action。它可以在并发情况下单独处理每个 Redux action，以提高程序的性能和稳定性。本文将介绍该包的使用教程，包含详细的代码示例。
安装
在使用 redux-worker-apply 之前，需要先安装它，请使用以下命令：
npm install redux-worker-apply
用法
redux-worker-apply 的使用非常简单。首先，需要在创建 store 的地方添加 middleware：
import { createStore, applyMiddleware } from 'redux';
import workerMiddware from 'redux-worker-apply';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(workerMiddware));然后，在需要异步处理的 action 上添加一个 worker 数组，其中每个元素都包含了要处理 action 的具体代码逻辑。
例如，我们需要异步地处理一个登录请求，在 loginActions.js 中添加以下代码：
-- -------------------- ---- -------
------ - -------------- -------------- ------------- - ---- --------------
------ - --------- - ---- --------------
-- -------
------ ----- ------------ - ---------- --------- -- --
----- --------------
---------
---------
------- -
-- ----------- -------- -- ------- ------
---------- -- -
---------- ----- ------------- ---
--
-- ------------------- ------
----- ---------- -- -
--- -
----- -------- - ----- ------------------- ----------
---------- ----- -------------- -------- -------- ---
- ----- ------- -
---------- ----- -------------- -------- ----- ---
-
-
-
---注意，每个 worker 都需要是一个函数，接受一个 dispatch 参数，它将触发一个新的 action。
在创建 ActionCreators 和 Reducers 时，需要添加一个 isWorker 参数来判断是否为 worker。例如在 reducers.js 中：
-- -------------------- ---- -------
------ - -------------- -------------- ------------- - ---- -----------------------
----- ------------ - -
------------- ------
--------- ---
------ -----
--
----- ------------ - ------ - ------------- ------- -- -
----- - ----- -------- -------- - - -------
------ ------ -
---- --------------
------ -
---------
------------- -----
--
---- --------------
------ -------- - ----- - -
---------
--------- --------
------------- ------
--
---- --------------
------ -------- - ----- - -
---------
------ --------
------------- ------
--
--------
------ ------
-
--
------ ------- ----------------- ------ ------------ ---接下来，我们来看看如何在异步请求后根据结果派遣不同的 action。
假设我们需要在登录请求结束后，判断请求结果是否正确，正确则分发一个 login success action，不正确则分发一个 login failure action。
可以在 action 的 worker 数组中使用 try...catch 语句来尝试异步请求。
-- -------------------- ---- -------
------ ----- ------------ - ---------- --------- -- --
----- --------------
---------
---------
------- -
---------- -- -
-- ----------- -------- -- ------- ------
---------- ----- ------------- ---
--
-- ------------------- ------
----- ---------- -- -
--- -
----- -------- - ----- ------------------- ----------
---------- ----- -------------- -------- -------- ---
- ----- ------- -
---------- ----- -------------- -------- ----- ---
-
-
-
---如果需要同时处理多个 worker，则可以在 worker 数组中添加多个函数。
例如，在 registerActions.js 中，我们需要异步处理注册请求，而且注册请求完成后需要同时修改用户列表和用户数量。
-- -------------------- ---- -------
------ - ----------------- ----------------- ---------------- - ---- --------------
------ - ------------ - ---- --------------
-- -------
------ ----- --------------- - ---------- --------- ------ -- --
----- -----------------
---------
---------
------
------- -
-- ----------- -------- -- ------- ------
---------- -- -
---------- ----- ---------------- ---
--
-- ------------------- ------
----- ---------- -- -
--- -
----- -------- - ----- ---------------------- --------- -------
---------- ----- ----------------- -------- -------- ---
---------- ----- ----------------- -------- ------------- ---
---------- ----- ------------------ -------- -------------------- ---
- ----- ------- -
---------- ----- ----------------- -------- ----- ---
-
-
-
---总结
通过上述使用教程，我们可以发现，redux-worker-apply 可以帮我们实现异步 action 的串行化处理，以免多个异步 action 同时执行时出现的问题。使用 redux-worker-apply 能够大大提高应用的性能和稳定性，同时也方便我们让异步 action 得到更好的管理和控制。
上面的代码仅供参考，具体的实现方式还需要根据项目需求进行调整。希望这篇文章对初学 redux-worker-apply 的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ce7
