如何使用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'))
    );