我在使用 React Redux 加载栏时遇到问题。它没有显示。我在根 reducer 中使用不可变的 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;
最佳答案
我有类似的问题,但我没有使用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'
这对许多人来说可能是微不足道的,但也许会对某人有所帮助。
关于reactjs - React Redux 加载栏未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53928356/