javascript - 调度 redux Action 时 JS 执行乱序

Question

我有以下伪代码的更复杂版本。它是一个 React 组件，在 render 方法中，它尝试从客户端读取缓存层获取它需要渲染的一段数据。如果数据存在，它会使用它。否则，缓存层会通过 API 调用获取它并通过触发几个操作来更新 Redux 状态(理论上这最终会导致组件使用新数据重新渲染)。
问题是，由于某种原因，似乎在调度 Action 1 之后，控制流再次移动到渲染函数的顶部(开始新的执行)，只有稍后继续调度 Action 2。然后我再次转到顶部渲染，过了一会儿我收到了 Action 3。
我希望在 redux 处理组件的重新渲染之前触发所有操作。我会认为调度一个 Action 更新了商店，但只强制组件在相当于 setTimeout 之后更新(所以在事件循环结束时)，不是吗？相反，当您分派(dispatch)一个 Action 时，组件会立即同步更新，然后再执行分派(dispatch)发生的其余函数吗？

class MyComponent {
  render() {
    const someDataINeed = CachingProvider.get(someId);

    return (
      <div>{someDataINeed == null ? "Loading" : someDataINeed }</div>
    );
  }
}

class CachingProvider {
  get(id) {
    if(reduxStoreFieldHasId(id)) {
      return storeField[id];
    }
    
    store.dispatch(setLoadingStateForId(id));
    
    Api.fetch().then(() => {
      store.dispatch(action1);
      store.dispatch(action2);
      store.dispatch(action3);
    });

    return null;
  }
}

Answer 1

除了@TrinTragula 的非常重要的答案:
这是 React 行为。从效果/生命周期或事件处理程序同步调用的触发重新渲染的事物是批处理的，但异步调用的事物(参见代码中的 .then)将触发完整的重新渲染，而不会对每个操作进行任何批处理。
如果您调用 this.setState，同样的行为将适用。连续三次。
您可以通过添加 batch 来优化该部分从 react-redux 导出:

    Api.fetch().then(() => {
      batch(() => {
        store.dispatch(action1);
        store.dispatch(action2);
        store.dispatch(action3);
      })
    });