Loading bar not working with redux-persist
nikhilracha opened this issue · comments
I have implemented react-redux-loading-bar with
loadingBarMiddleware(
{
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
}
and it was working perfectly fine. But after implementing the redux-persist the loading bar is not visible anymore.
After redux-persist
store.js
function configureStore(initialState = {}) {
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth', 'patients', 'tests', 'store', 'loadingBar'],
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer, initialState, compose(
applyMiddleware(thunk, loadingBarMiddleware(
{
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
}
)),
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
));
console.log("initialState", store.getState());
const persistor = persistStore(store, null, () => {
// if you want to get restoredState
console.log("restoredState", store.getState());
});
return { store, persistor };
}
export default configureStore;
Header.js
function Header() {
const { store, persistor } = configureStore();
return (
<header>
<Provider store={store} >
<PersistGate persistor={persistor}>
<LoadingBar
//loading={1}
style={{ height: "1.5px", opacity: "1", zIndex: "100000" }}
/>
</PersistGate >
</Provider >
In the redux tool, I can see that reducers are firing but I cannot see the loading bar??
Any idea??
@nikhilracha Hi there. It is hard to say from this what's wrong exactly.
If you pass loading={1}
to the component, does it become visible?
No, it's not visible. To cut short.. Here is the thing. I am using redux, thunk and loading bar middleware to show the side effects. But when i implement the same along with redux-persist, the loading bar is not visible. But, the reducers are being implemented such as LOADING_BAR_SHOW, LOADING_BAR_HIDE .......
I don't understand why the loading bar is not visible even when the reducers are getting implemented
@nikhilracha I'm not sure either. Can you come up with a demo with redux-persist
? I can't think of a reason how it can break the Loading Bar now.