带有 redux 的进度条

IT技术 reactjs redux
2021-04-30 13:53:31

我的 react/redux 应用程序中有一个后台上传过程,更新非常频繁。我的减速器看起来像这样:

export default function progressReducer(state = initialState, action = {}) {
  switch (action.type) {
    case PROGRESS_TOTAL_INCREASE:
      return Object.assign({}, state, {total: state.total + action.amount});
    case PROGRESS_CURRENT_INCREASE:
      let current = state.current + action.amount, total = state.total;
      if (current >= state.total && false) {
        state.total = 0;
        current = 0;
      }
      return {total, current};
    default:
      return state;
  }
}

有用。伟大的。但终极版devtool日志填满非常迅速地进步的行动,淹没了其他任何动作。这是正确的方法,还是我应该寻找一种不同的方式来创建这些通知?

谢谢!

2个回答

如果您使用的是 redux devtools chrome 扩展,您可以只列出应该隐藏在扩展设置中的操作。

redux devtools 扩展设置

否则,如果您已将其集成到您的项目中,请查看redux-devtools-filter-actions监视器。

我首先会说使用你的常识,大多数时候它会做出正确的决定。

这是我的建议

  • 如果多个组件需要跟踪上传进度,最好使用 redux

  • 如果只有特定组件需要跟踪上传进度,您可以只更新该组件状态

    请记住,如果您正在使用组件状态,则不能再使用纯功能组件......因为它们没有状态

  • 如果你想使用 redux 但希望保持商店更新最少,你可以在上传开始和完成时调度 action,并基于此你可以渲染一个加载栏..所以视觉上用户会知道上传正在进行中.