React Redux 加载栏未显示答案

【问题标题】：React Redux Loading Bar not showing upReact Redux 加载栏未显示
【发布时间】：2018-12-26 06:42:56
【问题描述】：

我在使用 React Redux 加载栏时遇到问题。它没有显示出来。我在根减速器中使用不可变 js，redux 不可变库。我没有收到任何错误。如果我检查元素树，则只有一个空 div。我在这里犯了什么错误

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;

【问题讨论】：

您希望看到什么？您的加载栏没有属性 - 大概您需要挂钩一些进度值，这通常是一个状态变量？
我没有看到加载栏本身，我关注文档，它只是说在组件中的任何位置安装组件，它应该可以工作。
演示代码设置了scope=，我认为这是您所缺少的。模块github页面上有一个例子
我试过使用scope，还是没有显示在页面中，据说是在多处使用时使用scope，目前我只使用一个加载栏。
好的，所以那里有一些你没有迷上的魔法......如果你真的想坚持使用那个组件，我会从一个工作演示（他们的代码）开始，然后逐块添加代码，直到它停止工作

标签： reactjs redux redux-immutable

【解决方案1】：

我遇到了类似的问题，但我没有使用 immutable-js。但是，无论如何，我还是想发布我的解决方案，也许它会对某人有所帮助:)

所以我按照 npm-page 上的说明做了所有事情，但是我错过了一个小细节：react-redux-loading-bar 导出连接的容器“LoadingBar”和 LoadingBar 组件本身。（见https://github.com/mironov/react-redux-loading-bar/issues/79#issuecomment-441355249）

所以请确保导入连接的容器（LoadingBar 周围没有花括号）：

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

这对许多人来说可能是微不足道的，但也许会对某人有所帮助。

【讨论】：