带 redux 的进度条

Question

我的 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;
  }
}

有效。伟大的。但是 redux devtool 日志很快就会用进度操作填满，淹没任何其他操作。这是正确的方法吗，还是我应该寻找一种不同的方式来创建这些通知？

谢谢！

Answer 1

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

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

Answer 2

我首先要说的是运用你的常识，大多数时候它会做出正确的决定。

这是我的建议

如果多个组件需要跟踪上传进度，最好使用redux。
如果只有一个特定组件需要跟踪上传进度，您可以只更新那个组件状态 .

请记住，如果您使用的是组件状态，则不能再使用纯功能组件...因为它们没有状态
如果你想使用 redux 但又想保持商店更新最少，你可以在上传开始和完成时调度操作，并基于此渲染加载栏。 . 这样用户可以直观地知道上传正在进行中。

带 redux 的进度条

Progress bar with redux

reactjs

redux