时间戳

首页 > 解决方案 > Redux 传奇。如何使用 addEventListener 执行操作？

redux-saga - Redux 传奇。如何使用 addEventListener 执行操作？

问题描述

如何使用 addEventListener 执行操作？

这是示例： https ://codesandbox.io/s/redux-toolkit-state-new-array-forked-t84l9?file=/src/redux/sagas/sagas.js

function* someFunc() {
// yield put(action)
}

addEventListener('event', *---what's this should be?---*)

标签： redux-sagasaga

解决方案

通常，大多数 addEventListener 事件都连接到某些 UI，因此您只需在组件中侦听该事件，然后分派一个操作以将数据放入 saga。

然而，如果你真的需要在 sagas 中直接监听某个事件，你可以使用eventChannel来达到这个目的。

它最终看起来像这样：

function* someFunc(event) {
    // ...
}

function* rootSaga() {
    const clickChannel = eventChannel((emitter) => {
        document.addEventListener('click', emitter);
        return () => document.removeEventListener('click', emitter);
    });
    yield takeEvery(clickChannel, someFunc);
}

你可以看到这里实现的组件和直接方法来测试它： https ://codesandbox.io/s/httpsstackoverflowcomquestions67683057redux-saga-how-to-put-action-using-addeventlistener-62rtr?file=/src/index .js:555-884

我使用组件方法将名称存储在商店中，并使用直接方法来保存鼠标坐标。

推荐阅读