在前端开发中，我们往往需要从用户界面获取一些事件，比如按钮点击、滚动、拖拽等等，这些事件触发后需要对应一些操作，如修改数据、发送请求等等。这时候就需要一个事件监听库，redux-event-listener 就是一个较为好用的实现。
安装
使用 npm 安装即可：
npm install --save redux-event-listener
基本使用方法
添加监听
import { addEventListener } from 'redux-event-listener';
addEventListener('click', event => {
console.log('点击了：', event.target);
});取消监听
import { removeEventListener } from 'redux-event-listener';
removeEventListener('click', event => {
console.log('取消点击事件监听');
});进阶使用方法
使用 reducer 进行状态控制
通过使用 reducer，我们可以根据监听事件的状态进行状态的修改：
import { addReducerListener } from 'redux-event-listener';
addReducerListener('scroll', (state, event) => {
return {
...state,
scrollTop: event.target.scrollTop,
};
});这里是一个简单的示例：当用户滚动页面时，记录其滚动距离。
与 redux 配合使用
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------------- ------------------- - ---- -----------------------
----- --------------- - ----- -- -
------ -
---------- ----------------
--
--
----- ------------------ - -------- -- -
------ -
------------------ -- --
-------------------------- ----- -- -
----------
----- -----------------
---------- -----------------------
---
---
--------------------- -- --
----------------------------- ----- -- -
--------------------
---
--
--
----- --------- ------- --------------- -
------------------- -
-------------------------------
-
---------------------- -
----------------------------------
-
-------- -
-- ---
-
-
------ ------- ------------------------ -------------------------------这里是一个与 redux 配合使用的示例：使用 addEventListener/addReducerListener 监听页面滚动事件，并将其修改共享的 state 中。
总结
redux-event-listener 是一个简单易用的事件监听库，可以方便地监听多种事件，并与 redux 等库进行整合，进行更为灵活的状态控制。总体来说，它的使用方法较为简单，但在实际项目中，我们可以发挥其最大的优势，实现更为复杂的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ac81e8991b448e2e5d