时间戳

首页 > 解决方案 > 缓慢调度多个动作 Redux React

javascript - 缓慢调度多个动作 Redux React

问题描述

当我调度多个操作时，我的应用程序明显变慢。

问题：

  1. 每次调度大约需要 300 毫秒吗？这是否包括运行 action、reducer 和 mapDispatchToProps 等所需的时间？我似乎没有触发任何额外的渲染。
  2. 即使我使用的是 redux-thunk，为什么还要等待每个调度完成？这不是他们会同时运行的重点吗？
  3. 我的商店里有相当多的数据，这会产生影响吗？
  4. 300ms是正常的调度时间吗？

我的组件 componentDidMount。

  componentDidMount () {
    let start = Date.now();
    let timePassed;


    this.props.action1();
    timePassed = Date.now() - start;
    console.log(timePassed); // 313 ms

    this.props.action2();
    timePassed = Date.now() - start;
    console.log(timePassed); // 652 ms

    this.props.action3();
    timePassed = Date.now() - start;
    console.log(timePassed); // 1038 ms

    this.props.action4();
    timePassed = Date.now() - start;
    console.log(timePassed); // 1441 ms


    this.props.action5();
    timePassed = Date.now() - start;
    console.log(timePassed); // 1832 ms
  }

我的行动：

export const action1 = () => ({
  type: 'TYPE',
  name: 'NAME',
});

我的减速机：

const actionReducer = (state, action) => {
  const { name } = action;

  return setIn(state, [name], {}); // Mutable lodash version of set.
};

编辑：我尝试了生产构建，每次调度的时间下降到 0-2 毫秒，但我仍然希望它在开发中更快。

标签： javascriptreactjsreduxredux-thunk

解决方案

推荐阅读