终极传奇。如何使用 addEventListener 执行操作？

Question

如何使用 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?---*)

Answer 1

通常，大多数 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/httpsWhosebugcomquestions67683057redux-saga-how-to-put-action-using-addeventlistener-62rtr?file=/src/index.js:555-884

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

终极传奇。如何使用 addEventListener 执行操作？

Redux saga. How to put action using addEventListener?

redux-saga

saga