将 react-redux 与基于事件的第三方库一起使用的最佳方法是什么?

What's the best way to use react-redux with event based 3rd party library

本文关键字：一起 最佳 是什么 方法 第三方 于事件 事件 react-redux      更新时间：2023-09-26

将视图连接到持续调度事件的库的最佳方法是什么？我在 redux 真实世界的例子中看到，最好使用 mapDispatchToProps 并注入您的加载操作。在我们的例子中，我们需要侦听随时间推移调度的事件。我认为我们可以使用中间件来做到这一点，但我不是 100% 确定。还有其他选择是在动作创建者本身中进行监听。

有什么想法吗？

//app.jsx

<div>
  <MyCollection name="ONE" />
  <MyCollection name="TWO" />
</div>

//my-collection.jsx

import {load} from './actions';
class MyCollection extends React.Component {
  componentDidMount() {
    this.props.load(this.props.name);
  }
  componentDidUpdate(prevProps) {
    if(prevProps.name !== this.props.name) {
      this.props.load(this.props.name);
    }
  }
  render() {
    return (
      <div>{this.props.name}: {this.props.value}</div>
    )
  }
}
function mapStateToProps(state) {
  return {
    value: state.value
  }
}
const mapDispatchToProps = {
  loadAndWatch
}
connect(mapStateToProps, mapDispatchToProps)(MyCollection);

行动.js

import {MyCollection} from '@corp/library';
export function load(name) {
  return (dispatch, getState) => {
    MyCollection.getValue(name, value => {
      dispatch(setValue(name));
    })
  }
}
export function setValue(name) {
  return {
    type: 'SET_VALUE',
    name
  }
}

减速器.js

function reducer(state, action) {
  switch(action.type) {
    case 'SET_WATCHING':
      return Object.assign({}, state, {isWatching: true});
    case 'SET_VALUE':
      return Object.assign({}, state, {value: action.value});
    default:
      return state;
  }
}

中间件.js

import {setValue} from './actions';
function middleware({dispatch, getState}) {
  return next => action => {
    switch (action.type) {
      case 'SET_VALUE':
        next(action);
        if (getState().isWatching) {
          return;
        }
        MyCollection.addChangeListener(name, value => {
          dispatch(setValue(name))
        });
        dispatch({type: 'SET_WATCHING'});    
    }
  }
}

我相信 redux-observable 是你正在寻找的，以防你不想用自制的中间件使你的应用程序过于复杂。

相关文章：