Loading bar is not changing loading state even if loading-bar/SHOW is triggered

[CROSP]

Hi, thank you for a great library, however I have a problem, that haven't been able to solve for several hours.

My index file has the following content

const render = Component =>
  ReactDOM.render(
    <ErrorBoundary>
      <AppContainer>
        <DiProvider container={getRootDiContainer()}>
          <Provider store={store}>
            <div>
              {/* If this slows down the app in dev disable it and enable when required  */}
              {devTools}
              <LoadingBar  updateTime={50} showFastActions style={{backgroundColor: '#009cd8', height: '5px', zIndex: 999999}}/>              <Component/>
            </div>
          </Provider>
        </DiProvider>
      </AppContainer>
    </ErrorBoundary>,
    rootEl
  );
render(AppComponent);

I added the middleware as follows

const defaultMiddlewares = [
  errorMiddleware,
  notificationMiddleware,
  promiseMiddleware(),
  loadingBarMiddleware({
    promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
  }),
  loggerMiddleware,
  sagaMiddleware
];

const composedMiddlewares = middlewares =>
  process.env.NODE_ENV === 'development'
    ? compose(
    applyMiddleware(...defaultMiddlewares, ...middlewares),
    DevTools.instrument()
    )
    : compose(applyMiddleware(...defaultMiddlewares, ...middlewares));

const initialize = (initialState?: IRootState, middlewares = []) => {
  const store = createStore(reducer, initialState, composedMiddlewares(middlewares));
  sagaMiddleware.run(rootSaga);
  return store;
};

And reducers in the following way

import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';

/* jhipster-needle-add-reducer-import - JHipster will add reducer here */

export interface IRootState {
  readonly authentication: AuthenticationState;
  readonly locale: LocaleState;
  readonly administration: AdministrationState;
  readonly userManagement: UserManagementState;
  readonly register: RegisterState;
  readonly activate: ActivateState;
  readonly passwordReset: PasswordResetState;
  readonly password: PasswordState;
  readonly settings: SettingsState;
  /* jhipster-needle-add-reducer-type - JHipster will add reducer type here */
  readonly loadingBar: any;
}

const rootReducer = combineReducers<IRootState>({
  authentication,
  locale,
  administration,
  userManagement,
  register,
  activate,
  passwordReset,
  password,
  settings,
  loadingBar
  /* jhipster-needle-add-reducer-combine - JHipster will add reducer here */

});

export default rootReducer;

The loading-bar/SHOW is triggered

However it still not display the Loading Bar, <div></div> and in React debugger

If I change the loading state manually from React Debugger it works and displayed correctly. Dispatching the event only causes the loading-bar/SHOW to be broadcasted, I have set a break point in LoadingReducer and it reaches it, albeit the internal state of loader is not changed.

What may cause such behavior?

[mironov]

@CROSP Hi, thank you for the question. How do you import the LoadingBar component? The library exports both the connected container and the component itself. The latter isn't connected to the Redux store and doesn't react to store changes.

Please make sure you are importing the connected container:

import LoadingBar from 'react-redux-loading-bar'

[CROSP]

@mironov Hi, thank you for your reply !!! Your are absolutely right, I have imported incorrect component, after importing the default one class everything works perfectly. Many thanks.