Redux 是一款非常优秀的状态管理框架，但是在实际的项目中，我们通常需要处理更多复杂的逻辑，比如异步请求，定时器等等。这时候，为了更好的处理这些逻辑，我们就需要使用 Redux 插件。其中，redux-events 就是一个非常好的插件，它能够让我们很方便的处理多种 Redux 中间件，如 redux-thunk、saga 等等。
redux-events 的安装和使用
安装 redux-events 很简单，只需要使用 npm 或者 yarn 即可：
--- ------- ------------ ------
或
---- --- ------------
安装完成之后，我们就可以在 Redux 中使用 redux-events 了。使用如下代码即可：
------ - ----------- - ---- -------- ------ - ---------------------- - ---- --------------- ------ ----------- ---- ------------- ----- ---------------- - ------------------------- ----- ----- - ------------------------ ------------ ------ ------- ------
上面的代码中，我们首先引入了 Redux 的 createStore 方法和 redux-events 的 createEventsMiddleware 方法。然后，我们将 createEventsMiddleware 方法返回的中间件作为参数传递给 createStore 方法，这样就可以使用 redux-events 插件了。
redux-events 的核心概念
在使用 redux-events 之前，我们需要了解 redux-events 的核心概念，包括：
Event
Event 是 redux-events 处理的事件。我们可以通过创建 Event 的方式来处理各种 Redux 中间件，比如 redux-thunk、saga 等等。
Event Handler
Event Handler 是处理事件的函数。当 Event 被 dispatch 时，会调用对应的 Event Handler 处理该事件。
ActionType
ActionType 是 Redux 中 Action 的类型，用于区分不同的 Action。在使用 redux-events 中，我们定义的 Event 也需要有对应的 ActionType。
使用 redux-thunk
如果我们想在 Redux 中使用 redux-thunk，我们可以使用如下的方式：
------ - ---------------------- - ---- --------------- ------ ----- ---- -------------- ----- --------------- - ------------------------------
上面的代码中，我们将 redux-thunk 作为参数传入了 createEventsMiddleware 方法，这样我们就可以使用 redux-thunk 了。
示例代码
最后，我们来看一个使用 redux-events 的完整示例代码：
------ - ------------ --------------- - ---- --------
------ - ---------------------- - ---- ---------------
------ ----- ---- --------------
----- ---------------- - ------------------------------
----- ------------ - -
------ --
--
----- ----------- - -
---------- ------------
--
----- -------------- - ------- -- --
----- ----------------------
-------- ------
---
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
------ ----------- - ---------------
--
--------
------ ------
-
--
----- ------ - -
---------- ------- -- -
------ ---------- -- -
--------------------------------
--
--
--
----- ---------- - ----------------------------------
----- ----- - ------------------------ ------------
------ ------- ------
------------------------------------ -- ------ -
------------------------------------ -- ------ -上面的代码中，我们首先定义了 initialState，包括 count 属性。然后，我们定义了 actionTypes，用于区分不同的 Action 类型。然后，我们定义了 incrementCount 函数，用于增加 count 属性的值。接着，我们定义了 rootReducer，用于处理不同的 Action 类型。然后，我们定义了 events，其中定义了 increment 函数，用于调用 incrementCount 函数，实现增加 count 属性的值。最后，我们将 eventsMiddleware 作为 applyMiddleware 方法的参数，创建了 store，并分别调用了两次 increment 函数，增加 count 属性的值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ce361a36e0bce8c76