Progress bar with redux

Question

I have a background upload process in my react/redux application that updates very frequently. My reducer looks something like this:

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

It works. Great. But the redux devtool log fills up very quickly with progress actions, drowning out any other actions. Is this the right approach, or should I be looking at a different way of creating these notifications?

Thanks!

Answer 1

If you are using redux devtools chrome extension, you can just list action that should be hidden in extensions settings.

Otherwise, if you have integrated it in your project, checkout redux-devtools-filter-actions monitor.

Answer 2

I will start by saying use your common sense, Most of the time it will make the right decision.

Here's what i suggest

• If multiple components need to keep track of the upload progress, Its best to use redux.

• If only a specific component needs to keep track of upload progress, You can just update that components state.

  Do remember if you're using components state, you can no longer make use of Pure functional components... as they don't have state

• If you want to use redux but want to keep the store updates minimum, you can just dispatch action when the upload starts and when its completed, and based on this you can render a loading bar.. so visually user will know upload is in progress.