Loading Bar not showing up

Hi I am using react/redux with react-redux-loading-bar plugin here is my store and saga and UI component. Could any one tell what i am doing wrong here.

SAGA.js

const filterGetData = function* ( action ) {
  try {
    yield put(showLoading())
    const users = yield call(fetchUsers,action.payload);
    yield put({type: 'USERS_RECIEVED', users})
  } catch (error) {
  yield put({type: 'LOAD_USERS_FAILURE', error})
  }finally {
    yield put(hideLoading())
  }
};
export function* watchForUsers() {
  while(true) {
    const action = yield take('LOAD_USERS');
    yield fork(filterGetData, action);
  }
}

Index.js

const rootReducers = combineReducers({
  appReducer,
  loadingBar: loadingBarReducer,
})
const store = createStore(
  rootReducers,
  applyMiddleware(sagaMiddleware ,loadingBarMiddleware())
);
sagaMiddleware.run(watchForUsers);

Ui component

<header>
 <LoadingBar style={{zIndex: 99999}}/>
</header>

[rkrishn]

thanks @mironov its working now.

[mironov]

@rkrishn Passing the loading prop shouldn’t be needed as it is pulled from the store by the connected Loading Bar component. It is exported via the default export.

https://github.com/rkrishn/github_user_search/blob/b43fed97ef6ee69f7c2db2921299f2b4d6fa53dc/src/components/App.js#L5

Looks like you’re importing the bare UI component that doesn’t connect itself to the store. Please change the line to:

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