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

Question

如何使用 addEventListener 设置 Action ？

例子如下: 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，因此您只需在组件中监听该事件，然后分派(dispatch)一个操作以将数据放入 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

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