Event loading-bar/SHOW is being triggered but the component still hidden

I’m trying to use this component but for some reason it looks like the component is not reacting to the state, the events are triggered but the bar doesn’t shows up… I’m using version 2.9.0 btw and react 15.5.4…

my setup:

const middleware = applyMiddleware(
    routerMiddleware(history),
    promise(),
    thunk,
    loadingBarMiddleware(),
    createLogger()
);
const store = createStore(
    combineReducers({
       ...
        loadingBar,
        router
    }),
    middleware
);

...

ReactDOM.render(
    (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <div id="app">
                    <LoadingBar showFastActions className="progress-bar"/>
                    ...
                </div>
            </ConnectedRouter>
        </Provider>
    ),
    document.getElementById('root')
);

UPDATE:

not even with saga and triggering the events manually it doesn’t seems to work.

[mironov]

@mparker11 Yep, that’s it. React Boilerplate seems to include the immutable store: https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/immutablejs.md

In that case you can import the immutable version of the Loading Bar. Change

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

to

import { ImmutableLoadingBar as LoadingBar } from 'react-redux-loading-bar'

[mparker11]

@mironov Ah, I didn’t even think about that! It slipped my mind because I’m using React Boilerplate. I guess you can totally ignore that pull request. It works for me now! Thanks! I just learned more on when to use get vs the dot notation as well.