进度条与redux

时间:2016-02-22 21:07:04

标签: 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;
  }
}

有效。大。但是,redux devtool日志会通过进度操作快速填充非常,淹没任何其他操作。这是正确的方法,还是我应该考虑以不同的方式创建这些通知?

谢谢!

2 个答案:

答案 0 :(得分:9)

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

redux devtools extension settings

否则,如果您已将其集成到项目中,请结帐redux-devtools-filter-actions显示器。

答案 1 :(得分:5)

我首先要说的是运用你的常识,大部分时间它会做出正确的决定。

这是我的建议

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

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

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

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