redux - 如何使用 redux-observable 在 dom 元素上添加事件监听器

Question

我需要帮助才能在窗口按键事件之后调度操作

() => Observable.fromEvent(window, 'keyup').map(event => ({type: 'KEY_PRESSED', key: event.key, event}));

感谢你

Answer 1

如果您总是想在这些keyup事件上监听和调度操作，Epic 非常简单：

const windowKeyUpEpic = () =>
  Observable.fromEvent(window, 'keyup')
    .map(event => ({
      type: 'KEY_UP',
      key: event.key,
      event
    }));

但这可能效率低下，因为您可能只想在某些特定情况下收听。

相反，您可以通过某种方式启用/禁用此全局侦听器：

const windowKeyUpEpic = action$ =>
  action$.ofType('START_LISTEN_FOR_KEYUP')
    .switchMap(() =>
      Observable.fromEvent(window, 'keyup')
        .map(event => ({
          type: 'KEY_UP',
          key: event.key,
          event
        }))
        .takeUntil(action$.ofType('STOP_LISTEN_FOR_KEYUP'))
    );