一、概述
在前端开发中，redux 是一个非常流行的状态管理框架，而 redux-eventually 则是一个基于 redux 的事件处理工具包。redux-eventually 可以让我们方便地按照事件驱动的方式管理应用的状态。本文将介绍 redux-eventually 的使用教程，包括安装、配置以及如何使用。
二、安装
在使用 redux-eventually 之前，需要先安装 redux 和 react-redux，可以使用 npm 或者 yarn 进行安装。
npm install --save redux react-redux
接着，我们需要安装 redux-eventually。
npm install --save redux-eventually
三、配置
使用 redux-eventually 之前，需要先在应用中引入 eventuallyMiddleware。可以在 createStore 中将其添加到中间件列表中。
import { createStore, applyMiddleware } from 'redux';
import eventuallyMiddleware from 'redux-eventually';
const store = createStore(
reducer,
applyMiddleware(eventuallyMiddleware)
);可以看到，在 createStore 中使用了 applyMiddleware，将 eventuallyMiddleware 添加到了中间件列表中，这样在应用中就可以使用 redux-eventually 了。
四、使用
在 redux-eventually 中，我们需要定义事件以及事件的处理函数。每个事件需要有一个唯一的 type，这个 type 用于区分不同的事件。
下面是一个示例：
-- -------------------- ---- -------
----- ----------------- - --------------------
-------- ----------- -
------ -
----- ------------------
--
-
-------- ---------------------- -
------ -
---------
------ ----------- - --
--
-
------ ------- -
-------------------- ----------------
--
------ -
----------
--可以看到，在上面的代码中，我们定义了一个名为 INCREMENT_COUNTER 的事件，同时定义了一个名为 handleIncrement 的事件处理函数。在 handleIncrement 中，我们将状态中的 count 加一。
接着，在应用中，可以使用 increment 方法来触发 INCREMENT_COUNTER 事件：
-- -------------------- ---- -------
------ - --------- - ---- --------------------
----- --- ------- --------- -
-------------------- - -- -- -
---------------------------------
-
-------- -
------ -
-----
-------------------------
------- ----------------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ------------------------------在上面的代码中，我们通过 mapStateToProps 将 count 从状态中取出，在 handleIncrementClick 函数中调用 increment 方法，从而触发 INCREMENT_COUNTER 事件。
最后，我们需要在 reducer 中使用 redux-eventually 提供的 createEventuallyReducer 函数生成 reducer：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ----------------------- - ---- ------------------- ------ --------------- ---- ---------------------- ----- -------------- - ----------------------------------------- ------ ------- ----------------- -------- --------------- ---
在上述代码中，我们使用了 createEventuallyReducer 函数，将之前定义好的事件处理函数传入，并生成 reducer。
五、总结
通过本文的介绍，我们了解了如何使用 redux-eventually，在应用中定义事件以及事件处理函数，并通过 redux 将其与状态进行关联。通过这种方式，我们可以轻松地实现事件驱动的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668281e8991b448e2a82
