前言
随着互联网的飞速发展，前端技术也在快速迭代。常见 MVC、MVVM 等框架、库不断出现，以 React 为代表的前端库更是广泛应用于前端开发中。而在 React 应用中，状态管理也日益重要。Redux 作为 React 最流行的状态管理库之一，已经成为很多项目的首选。开发者一般通过 redux-thunk 或 redux-saga 等中间件对 Redux 进行加强。今天介绍一款新型的中间件 redux-actionemitter，它能使开发者更加简单方便地处理异步行为。
何时使用 redux-actionemitter
在 React 应用中，Redux 进行状态管理是必不可少的一环。Redux 的核心概念可以简单概括为三个：action、reducer 和 store，其中，action 负责表达“发生了什么事件”，reducer 负责处理“发生的事件如何影响应用状态”，store 则通常表示应用状态。
然而，当我们需要处理异步行为时，一般需要借助其他中间件进行加强。这时，redux-actionemitter 这个中间件就可以帮助我们处理异步行为的「发起者与接收者」的通讯，从而更加简单愉悦地完成异步逻辑。
对于异步操作，开发者一般需要自己设计动作发起的格式，然后发起一个 action，并在 reducer 中处理该动作。一般来说，这个流程是通过 thunk 或 saga 进行的，但实际操作中，使用 thunk、saga 进行异步流程操作，不仅繁琐，而且很容易出错。这时候，redux-actionemitter 可以大大提高异步操作的效率和准确性。
安装及使用
首先你需要使用 npm 安装 redux-actionemitter：
npm install redux-actionemitter --save
然后，在 Redux 的 createStore() 函数中，我们需要同时加入 redux-actionemitter 和 redux-thunk：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ - ----------------------------- - ---- ---------------------- ------ ----------- ---- ------------------- ----- ----------------------- - -------------------------------- ----- ----- - ------------ ------------ -------------------------------- ------------------------ -- ------ ------- ------
对于发起 action ，只需要在 action creator 中使用 emitter.emit() 方法即可。下面是一个例子：
-- -------------------- ---- -------
------ --- ---- ---------
------ - --------- -------- ------- - ---- ----------
------ -------- ---------------- ----- -
------ ----- ---------- --------- - ------- -- -- -
----- ------------------ - -
----- ---------------
--------
-----
--
-----------------------------
--- -
----- -------- - ----- -------------
----- -------------------- - ----------------- ----------
-------------------------------
-- ------------ ---------------------------
-- --------- ------------------- ---------
----------------------------------- ----------------------
- ----- ------- -
----- -------------------- - ----------------- -------
-------------------------------
-- ------------ ---------------------------
-- --------- ------------------------- ---------
----------------------------------------- -------
-
--
-可以看到，在异步操作中，我们只需要在最后使用 emitter.emit() 就可以将需要触发的事件发送给接收器，从而让接收器进行处理。
在此处稍稍介绍一下 dispatch() 函数和 emitter.emit() 函数的区别：
dispatch()函数是用来让 reducer 执行的，设计者通过 action creator 生成不同的 action，并将其发送给 reducer，让 reducer 根据 action 的 type，对 state 进行更新，进而影响 store 的变化。emitter.emit()的作用是让客户端发送事件给接收器，进而触发特定的操作，不涉及redux中的 action 与托管的 state。
举个例子，假设我们想要在获取数据之后给用户提示 “数据加载成功” 或 “数据加载失败”。通常我们会为不同的数据请求类型设置不同的action类型，然后利用redux-actionemitter 中 emitter.emit() 函数向接收器发送事件来触发提示操作。假如你想让接收器监听 /common/tips 事件，你可以在 action 代码中这样使用：
-- -------------------- ---- -------
------ - ---- - ---- ----------
------ -------- --------- --------- -
------ ----- ---------- --------- - ------- -- -- -
-- -------
--- -
-- ---------- ---
----- -------- - ----- -------------
-- ------------ ----
---------- ----- ------------------- ----- -------- ---
-- -- -------------- ------------------
---------------------------- ----------
- ----- ------- -
-- ----
---------- ----- ------------------- ----- ----- ---
-- -- -------------- ------------------
---------------------------- ----------
-
-
-如此一来，就可以在接收器监听到 /common/tips 事件，然后进行提醒操作。
注意，接收器需要使用对应的库，如 socket.io、engine.io 等，来实现事件监听。
总结
redux-actionemitter 中间件将异步操作和事件解耦，让开发者能够更加专注流程处理，减少代码维护难度。如果你想要更加简洁、高效地处理异步逻辑，不妨试试 redux-actionemitter。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c47