svrcekmichal / redux-axios-middleware

Redux middleware for fetching data with axios HTTP client
MIT License
922 stars 96 forks source link

Support for "Is Loading" State? #107

Open iMerica opened 4 years ago

iMerica commented 4 years ago

Hello,

My app has over 75 different types of axios actions using this library and I would like to handle the loading state in a generalized way rather than hundreds of lines of case TYPE.FOO_SUCCESS in my reducers.

For context: I have a single page application with loading spinners at the "page" level and on individual sub components. They all use the same "state.loading" state.

Is there a best practice or pattern here?

I'v tried this:

let loading = false
let requestsHappening = 0;

export const rootReducer = (state = initialState, action) => {
  if (isAxiosRequest(action) && !/(.*)_(SUCCESS|FAIL)/.exec(action.type)) {
    requestsHappening += 1
    loading = true
  } else if (isAxiosRequest(action)) {
    requestsHappening -= 1
    loading = requestsHappening !== 0;
  }
  switch (action.type) {
    // hundreds of lines of Redux boilerplate
    default:
      return {
        ...state,
        loading,
    }
  }
}

But I can't seem to make it work.

jacobgavin commented 4 years ago

I would guess that you can add interceptors like they show in the documentation and on request success use the dispatch you get from the config to dispatch something like dispatch({ type: 'REQUEST_START' }) and in your interceptors for response dispatch({ type: 'REQUEST_RESOLVED' })

or something like that