redux/react 将状态映射到具有大量数据排队状态更新的道具答案

【问题标题】：redux/react mapping state to props with large amounts of data queuing state updatesredux/react 将状态映射到具有大量数据排队状态更新的道具
【发布时间】：2019-01-11 14:37:49
【问题描述】：

使用套接字监听服务器； Redux 存储不断更新数千条数据记录。商店的更新只需要几秒钟，数千个对象通过操作被调度。但是，使用 redux 连接函数通过 mapStateToProps 将状态映射到我的组件似乎将状态更改排队并以每秒大约 7-10 条记录的速度更新组件的状态。这意味着 React 组件需要很长时间才能渲染。有什么解决方案可以加快速度吗？此外，确切的数据量将始终在变化，并且没有固定的数量。

这是我的组件：

class TestComponent extends Component {
  state = {};

  componentDidMount() {
    this.props.connectToSocket();
  }

  render() {
    const { classes, width, people, vehicles, incidents, locations } = this.props;

    return (
      <div>
         Hello
      </div>
    );
  }
}

TestComponent.propTypes = {
  classes: PropTypes.object.isRequired
};

const mapStateToProps = state => {
  console.log(state);
    return {
      people: state.live.people,
      vehicles: state.live.vehicles,
      incidents: state.live.incidents,
      locations: state.live.locations
    }
};

const mapDispatchToProps = {
  connectToSocket: connectToSocket
};

export default connect(mapStateToProps,mapDispatchToProps(TestComponent));

初始化套接字的动作在 componentDidMount() 函数中执行。然后我可以在控制台中看到正在打印的状态，但是，它会以每秒大约 7-10 条新记录的速度打印每次更新。由于在很短的时间内对 store 进行了 5000 多次更新，因此将 redux store 映射到组件的 props 需要更长的时间，并且渲染组件需要 5 分钟以上。

有什么想法吗？

【问题讨论】：

你打算同时使用这个组件中获取的所有数据吗？
是的，组件需要所有数据，并且还需要对商店进行额外更新
所以所有获取的数据都将同时呈现？好吧，我认为这在用户体验和性能方面都不是有效的。如果你以某种方式进行分页会更好。在这种情况下，例如前 100 条记录将被渲染，其余的将被获取并存储在状态中，但您的组件不会渲染，因为您只会将一部分数据传递给 mapStateToProps 中的组件
该组件将要求所有数据都在地图上实时呈现，因此都是必需的。

标签： javascript reactjs redux socket.io react-redux

【解决方案1】：

通常，这里的答案涉及某种形式的批处理：

您可以对来自套接字的数据进行批处理，这样您就可以分派 5 个具有 N/5 个值的动作，而不是分派每个具有 1 个值的动作，或者类似的东西。
您可以使用各种批处理中间件或存储增强器之一来减少 Redux 订阅通知的数量。

有关更多想法和链接，请参阅Redux FAQ entry on reducing the number of store update events。

【讨论】：