React Redux Loading Bar not showing up

Question

I have a problem with using React Redux Loading Bar.it is not showing up.I'm using immutable js, redux immutable library in root reducer.I don't get any errors. If I inspect elements tree, there is only one empty div. what mistake am I making here

index.js

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

class Header extends React.Component {
render() {
return (
  <header>
    <LoadingBar />
  </header>
)
}
}

reducer.js

import { combineReducers } from 'redux-immutable';
import { loadingBarReducer } from 'react-redux-loading-bar'

export function rootReducer(state = routeInitialState, action) {
switch (action.type) {

case LOCATION_CHANGE:
  return state.merge({
    location: action.payload,
  });
default:
  return state;
  }
}
export default function createReducer(injectedReducers) {
  return combineReducers({
    route: rootReducer,
    language: languageProviderReducer,
    loadingBar: loadingBarReducer,
    ...injectedReducers,
   });
   }

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import { loadingBarMiddleware } from 'react-redux-loading-bar'

export default function configureStore(initialState = {}, history) {
 const middlewares = 
  [sagaMiddleware,routerMiddleware(history),loadingBarMiddleware()];

 const enhancers = [applyMiddleware(...middlewares)];


 const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      shouldHotReload: false,
    })
  : compose;

 const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers),
  );

 store.runSaga = sagaMiddleware.run;

What do you expect to see? Your loading bar has no properties - presumably you need to hook into some progress value, which is normally a state variable? — Mikkel, Dec 26 '18 at 06:47
i dont see loading bar itself, i follow docs, it simply says mount component any where in component and it should work. — Ashok, Dec 26 '18 at 06:54
The demo code sets a `scope=`, which I think is what you are missing. There is an example on the module github page — Mikkel, Dec 26 '18 at 06:56
i tried using scope ,it still doesnt show up in page,its being said that, scope is used when we use it in multiple places, for now i use only one loading bar. — Ashok, Dec 26 '18 at 07:05
ok, so there is some magic there that you haven't hooked into... If you really want to stick with using that component, I would start with a working demo (their code), and add your code chunk by chunk until it stops working — Mikkel, Dec 26 '18 at 07:54
thanks.actually i want to show it when page reloads, and navigating to other pages. i use saga middleware. — Ashok, Dec 26 '18 at 09:15
Have you figured it out? When I inspect I see `
` when I should se `` why it's not working, what causes this, damn — Lizard Derad, Jan 25 '20 at 19:16
@Ashok How? I have the same issue? Please post your solution here :) — ezik, Mar 04 '20 at 10:38
I ended up binding it manually through mapStateToProps for lib version 4.6.0... after so many years, let me know if there is a better solution lol — Ryan Chu, Aug 01 '20 at 08:13

Lennart Popkes · Answer 1 · 2020-04-18T11:13:42.570

I had a similar issue, but I was not using immutable-js. However, I'd like to post my solution anyway, maybe it'll help someone :)

So I did everything according to the instructions on the npm-page, but I missed one little detail: react-redux-loading-bar exports both the connected container "LoadingBar" and the LoadingBar component itself. (see https://github.com/mironov/react-redux-loading-bar/issues/79#issuecomment-441355249)

So make sure to import the connected container (without curly braces around LoadingBar):

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

This might be trivial for many, but maybe it'll help someone.

React Redux Loading Bar not showing up

1 Answers1