进度条与redux

Dan*_*Dan 14 reactjs redux

我在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;
  }
}
Run Code Online (Sandbox Code Playgroud)

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

谢谢!

小智 9

如果您使用的是redux devtools chrome扩展,则只需列出应在扩展程序设置中隐藏的操作.

redux devtools扩展设置

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

  • 那么你会说这样使用redux是可以的吗?我只是想知道发出这么多事件是不是一种不好的做法. (2认同)
  • @ user37078我认为用这种方式使用redux很好.你确实得到了很多渲染,但这就是反应的好处,因为它实际上只是在需要的地方更新DOM,所以这主要发生在内存而不是DOM中,缓解了许多经常渲染的问题.另外,为了创建你想要的UI效果,你需要继续渲染,没有办法解决这个问题.也就是说,有时我会将组件状态用于这样的事情,因为我的redux应用程序的其余部分并不真正关心这些事件.这是一个风格/实现的东西,真的取决于你的应用程序和它的用例. (2认同)

Dhr*_*Jha 5

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

这是我的建议

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

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

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

  • 如果你想使用redux但想要保持最小的商店更新,你可以在上传开始和完成时调度动作,并在此基础上你可以渲染一个加载栏..所以视觉上用户将知道上传正在进行中.