React-redux-starter-kit: isFetching best practice

[kodermax]

Guys help me,
i have layout

<div className='container text-center'>
    <Header/>
     <ProgressBar mode='indeterminate' multicolor status={isFetching ? 'loading' : 'hide'} />
    <div className={classes.mainContainer}>
      {children}
    </div>
  </div>

{children} - redux component which use ajax request for get data.
How can i activate ProgressBar from children?

[SpencerCDixon]

you might want to create some sort of global isFetching that checks to see if any of the child isFetchings are set to true than turn the progress bar on. One way you could implement that is via a compound selector (using reselect) that checks all the isFetching input selectors for truthiness.

Alternatively you could just do one big || statement like:

mapStateToProps = state => ({
  globalFetching: state.posts.isFetching || state.todos.isFetching ... etc.
});

Hope that helps/gives you direction!

[kodermax]

Thank you @SpencerCDixon

[razvanip]

You could have a store/reducer that will catch an action dispached from the middleware( used for all async actions) everytime an ajax call is triggered and finised. U could have a counter in the store for that. U could connect and get the counter in the class that connects to the store and if the total count is bihlgger than 0 show the progress bar.

[kodermax]

@razvanip are there any example of this?

[kolpav]

@kodermax Not the prettiest solution but it works if yours async action are in format FOO_REQUEST, FOO_SUCCESS, FOO_FAILURE

// progressMiddleware.js //
import { showProgressBar, hideProgressBar } from '../modules/progress'

export default ({ dispatch, getState }) => next => action => {
  // FOO_REQUEST => REQUEST //
  const requestType = action.type.slice(action.type.lastIndexOf('_') + 1)
  const isProgressBarShown = getState().progress
  if (requestType === 'REQUEST' && !isProgresBarShown) {
    dispatch(showProgressBar()) // Sets state.progress to true
  } else if (requestType === 'SUCCESS' || requestType === 'FAILURE' && isProgresBarShown) {
    dispatch(hideProgressBar()) // Sets state.progress to false
  }
  return next(action)
}

[kodermax]

@kolpav thank you.