如何使用 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?---*)
最佳答案
通常,大多数 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
我使用组件方法在商店中存储名称,并使用直接方法保存鼠标坐标。
关于redux-saga - 终极传奇。如何使用 addEventListener 执行操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67683057/