尽管附加的 reducer 函数执行速度很快，但 Redux 调度操作花费的时间太长

Question

我收到 setTimeout handler took 500+ ms 类型的 chrome 违规错误，这些错误严重阻塞了我的应用程序，并且每次附加到 websocket 有效负载的操作出现并被处理时都会发生一些错误。我尝试使用 chrome profiler 对其进行调试，这正是它在处理有效负载时所显示的内容。

https://imgur.com/a/ZnS0ZlG

(anonymous) 函数是 reducer 中的函数，运行时间与错误一致。

这是一些代码。

// ACTION
const someAction = (data): Thunk => async dispatch => {
  try {
    const t = performance.now();
    dispatch(someAction(data));
    console.log('after dispatching cellReceived', performance.now() - t); 
    // logs 800+ ms and is consistent with chrome violation errors (setTimeout handler took <N> ms
  }
}

// REDUCER
  export default(state: State, action: Actions) {
  switch(action.type) {
    ...
    case ActionType.someAction: {
      const { data } = action.payload;
      const t = performance.now();
      (... do calculations here)
      console.log(performance.now() - t) // logs 30ms
    }
  }
}

我将非常感谢任何帮助，这周我必须花费 20 多个小时来阅读此问题并尝试对其进行调试。我没有找到任何关于如何使用 chrome 的分析器正确调试的好资源。

Answer 1

它实际上不需要是 dispatch 或 reducer。在某些情况下，React 将同步启动重新渲染，这是 dispatch 的直接结果 - 所以在您的 console.log('after dispatching cellReceived', performance.now() - t); 行之前

所以这也可能是一个非常慢的 React 渲染。

如果您想确定：

import { batch } from 'react-redux'

const someAction = (data): Thunk => async dispatch => {
  try {
    batch(() => {
        const t = performance.now();
        dispatch(someAction(data));
        console.log('after dispatching cellReceived', performance.now() - t); 
    })
  } catch {/*...*/}
}