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

Question

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

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

它实际上不需要是分派器或减速器。在某些情况下，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 {/*...*/}
}

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

Redux dispatch action taking too long despite reducer function attached executes fast

performance

google-chrome-devtools

redux

react-redux