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

Question

我需要帮助来在窗口按键事件后调度一个 Action

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

谢谢你

Answer 1

如果你总是想在这些 keyup 事件上监听和调度 Action ，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'))
    );