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

// 引入必要的库和操作符
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware, ofType } from 'redux-observable';
import { fromEvent } from 'rxjs';
import { mapTo } from 'rxjs/operators';

// 创建一个Epic
const eventEpic = action$ =>
  action$.pipe(
    ofType('ADD_EVENT_LISTENER'), // 监听特定的Action类型
    mapTo(fromEvent(document, 'click')) // 创建一个Observable流，监听document上的click事件
  );

// 创建一个Action
const addEventListenerAction = () => ({
  type: 'ADD_EVENT_LISTENER'
});

// 创建一个Reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'CLICK_EVENT':
      return { ...state, clicked: true };
    default:
      return state;
  }
};

// 创建一个Store
const epicMiddleware = createEpicMiddleware();
const store = createStore(reducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(eventEpic);

// 在组件中使用事件侦听器
import { connect } from 'react-redux';
import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    this.props.addEventListener();
  }

  render() {
    return <div>My Component</div>;
  }
}

const mapDispatchToProps = dispatch => ({
  addEventListener: () => dispatch(addEventListenerAction())
});

export default connect(null, mapDispatchToProps)(MyComponent);