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

Question

我需要帮助在 window 按键事件后调度一个动作

() => 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
    }));

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

您可以通过某种方式 enable/disable 这个全局侦听器：

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'))
    );

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

How add event listener on dom element with redux-observable

redux

redux-observable