loading bar not hiding once displayed !!! about react-redux-loading-bar

[mironov]

@ashwinimnnit Could you provide more info about your setup? Do you dispatch _FULFILLED or _REJECTED actions at the end of async events?

[ashwintastic]

yes I have dispatched _FULFILLEd or _REJECTED action, the loadingBarReducer is executing and in case HIDE i'm getting newstate = 1. actually on page load there are several ajax call executing

[mironov]

@ashwinimnnit Please make sure the you call _FULFILLED or _REJECTED the same amount of times as _PENDING. Basically speaking, the Loading Bar will be shown until all ajax request complete.

If you want to forcefully hide Loading Bar, you can call resetLoading() at any time.

[ashwintastic]

I tried resetLoading() but it is throwing error Uncaught (in promise) TypeError: (0 , _reactReduxLoadingBar.resetLoading) is not a function

[mironov]

Please show me the code you're using.

[ashwintastic]

   import { showLoading, hideLoading, resetLoading } from 'react-redux-loading-bar';

     export default function loadingBarMiddleware(config = {}) {
     return (store) => next => (action) => {
      console.log('dispatch', action);

      const isPending = new RegExp(`_FETCHING_`, 'g')
      const isFulfilled = new RegExp(`_FETCHED_`, 'g')
      const isRejected = new RegExp(`_FETCH_.*_FAILED`, 'g')


    if (action.type.match(isPending)) {
        store.dispatch(showLoading())
    } else if (action.type.match(isFulfilled) ||
        action.type.match(isRejected)) {
        store.dispatch(hideLoading())
        //store.dispatch(resetLoading())
    }
    return next(action);
}}

from here I'm dispatching the actions..

[mironov]

@ashwinimnnit Well, apparently I forgot to export resetLoading action. I just published the v2.6.5, please give it a try.

[ashwintastic]

ok :)

[ashwintastic]

Yeah that error has gone... but still hideLoading is not hiding the loading bar

[mironov]

Could you check what is in the store?

[ashwintastic]

@mironov : but show and hide action are executing same number of time...

I debug it ... in the end I'm getting newState = 1 when case is Hide in loadingBarReducer()

[ashwintastic]

@mironov i checked store and get loadingBar: 2

[mironov]

resetLoading explicitly sets the counter to 0.
If the counter is > 0 that might mean that showLoading has been called after resetLoading.

Could you check the order of actions that were dispatched using redux logger middleware?

[ashwintastic]

Yeah sequence is somethig like this.

loading-bar/SHOW ---> loading-bar/HIDE ---> loading-bar/SHOW ---> loading-bar/HIDE and at last newState is 1

[mironov]

In that case the counter should be 0. Please make sure there're no more loading bar related actions dispatched.

[ashwintastic]

when the first time showLoading() is called loadingBar: 2 in store , I think it should be 1

[mironov]

Yes it should be 1. Please check your initial state of the store when the app is being loaded.

[ashwintastic]

initially the state is 0 ---> then it become 1 ---> then loading-bar/SHOW action executes which makes it 2.

[mironov]

When you say "then it become 1" — what do you mean? What action makes the counter to become 1?

[mironov]

@ashwinimnnit Something is changing the counter to 1 before showLoading kicks in. I can take a look deeper if you can push related code to a repo or gist.

[mironov]

@ashwinimnnit Do you use the bundled loadingBarReducer or a custom one? It looks like the loadingBarReducer returns 1 on store initialization.

[ashwintastic]

loadingBarReducer is bundled but the middleware is custom

[ashwintastic]

@mironov :

Here at store initialization arguments[0] contains 1 when the action type is @@redux/PROBE_UNKNOWN_ACTION_9.o.0.b.b.5.1.k.b.6.7.k.q.0.8.u.x.r

      function loadingBarReducer() {
         var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 
        var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var newState = void 0;
      switch (action.type) {
        case SHOW:
        newState = state + 1;
         break;
        case HIDE:
        newState = state > 0 ? state - 1 : 0;
        break;
       case RESET:
        newState = 0;
        break;
       default:
    return state;
   }
 return newState;
  }

[mironov]

@ashwinimnnit Could you show your combineReducers function?