NPM 是全球最大的 JavaScript 软件包注册表，通过使用 NPM 包，可以轻松地扩展您的前端项目。ev-redux 是一个构建在 Redux 之上的事件库。它使开发者能够更轻松地处理不同的 Redux 事件类型。
本篇文章将介绍如何使用 ev-redux 和 Redux，实现一个更加高效的前端项目。
安装
首先，您需要安装 Redux：
npm install --save redux
然后，您可以安装 ev-redux：
npm install --save ev-redux
开始使用
初始化 store
使用 ev-redux 前，需要创建 Redux 的 store。创建 store 的方法与普通的 Redux setup 一样。我们需要为 store 提供 reducers 和 middleware。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ -- ---- ----------- ----- ----------- - ----------------- -- ----- --- -------- ---- --- ----- ----- - ------------------------ ------------------------ ----------
注册事件处理程序
我们可以通过调用 createEventHandler 即可创建一个事件处理程序，您需要将所创建的事件处理程序注册到 ev-redux。
import { createEventHandler } from 'ev-redux';
const handleEvent = createEventHandler('EVENT_NAME', (state, action) => {
// todo: add event handler
return state;
});
ev.registerEventHandler(handleEvent);我们也支持使用对象语法，以及一次注册多个处理程序。
-- -------------------- ---- ------- ------ - ------------------ - ---- ----------- ----- ------------ - ----------------------------- ------- ------- -- - -- ----- --- ----- - ------- ------ ------ --- ----- ------------ - ----------------------------- ------- ------- -- - -- ----- --- ----- - ------- ------ ------ --- -------------------------- -------- ------------- -------- ------------- ---
触发事件
用 dispatch 触发事件。ev-redux 会自动调用与事件名称相同的处理程序。
store.dispatch({ type: 'EVENT_NAME', payload: {} });事件处理程序实现
当事件被触发时，所注册的事件处理程序将被调用。事件处理程序传递两个参数，当前状态和行动参数。
const handleEvent = createEventHandler('EVENT_NAME', (state, action) => {
// todo: add event handler
return state;
});
ev.registerEventHandler(handleEvent);完整实例
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ----- ---- --------------
------ -- ---- -----------
------ - ------------------ - ---- -----------
----- ------------ - -
------ --
----- --
--
----- ----------- - ------ - ------------- ------- -- -
-------------- --- ----------- -
------ -
---------
------ ----------- - -
-
- ---- -------------- --- ----------- -
------ -
---------
------ ----------- - -
-
-
------ ------
-
----- ---------------- - --------------------------------- ------- ------- -- -
----- - ---- - - ---------------
------ -
---------
-----
-
---
----- ----- - ------------------------ ------------------------
----------
------------------------------------------
----------------
----- --------------
-------- -
----- ------- --------
--
---
------------------------------运行代码，您将看到以下输出：
{ count: 0, text: 'Hello, world!' }结论
使用 ev-redux，开发者可以更加轻松地处理不同的 Redux 事件类型。ev-redux 让事件处理程序的创建、注册变得更加容易。如果您正在处理许多 Redux 事件，那么 ev-redux 是一个极好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005742581e8991b448e9ec4