我已经开始使用react-loadable拆分代码,所有这些都很好,直到我想使用this.props。深入挖掘我发现redux状态是空的,就像createStore根本没有被调用一样。 createStore中的控制台日志显示它已启动并且正确传递了存储对象。不知何故,在改变反应可装载之前,它没有得到减速器状态。
在结果中我遇到了很多错误,如:
Uncaught TypeError: Cannot read property 'error' of undefined
在
{this.props.auth.error && <div className="c-alert c-alert--warning alert fade show">
Root.js
const Login = Loadable({
loader: () => import(/* webpackChunkName: "Login" */ './Login'),
loading: () => <div>Loading...</div>,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props}/>
}
});
index.js:
import configureStore from "./store/configureStore";
const {store, persistor} = configureStore();
import { PersistGate } from 'redux-persist/integration/react'
ReactDom.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Root store={store} />
</PersistGate>
</Provider>
,
document.getElementById('wrapperContainer')
);
configureStore.js
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { routerReducer } from 'react-router-redux'
import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
const persistConfig = {
key: 'root',
storage,
}
// create reducer from outlets, custom reducers and our router
const reducer = combineReducers({...reducers, routing:routerReducer});
const persistedReducer = persistReducer(persistConfig, reducer);
// create the store with thunk and promise middleware
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
promiseMiddleware
)(createStore);
/**
* Creates a preconfigured store
*/
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(
persistedReducer,
initialState,
window.devToolsExtension && window.devToolsExtension()
);
var persistor = persistStore(store);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers/index');
store.replaceReducer(nextRootReducer);
});
}
return { store, persistor };
}
的package.json
"dependencies": {
"axios": "^0.5.4",
"babel-polyfill": "^6.9.1",
"history": "^4.7.2",
"i": "^0.3.6",
"install": "^0.11.0",
"moment": "^2.13.0",
"npm": "^5.8.0",
"prop-types": "^15.6.1",
"react": "^16.0.0",
"react-addons-pure-render-mixin": "^15.2.0",
"react-addons-shallow-compare": "^15.2.1",
"react-addons-update": "^15.1.0",
"react-autosuggest": "^9.3.4",
"react-calendar-timeline": "^0.16.1",
"react-chartist": "^0.10.2",
"react-color": "^2.14.1",
"react-datepicker": "^1.4.1",
"react-dom": "^16.0.0",
"react-loadable": "^5.4.0",
"react-redux": "^4.4.9",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-select": "^1.2.1",
"react-smooth-dnd": "^0.3.7",
"react-sortable": "^2.0.0",
"react-toggle": "^4.0.2",
"redux": "^3.7.2",
"redux-logger": "^2.6.1",
"redux-persist": "^5.9.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.9.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-less": "^1.2.0",
"grunt-contrib-watch": "^0.6.1",
"react-hot-loader": "^3.0.0",
"s3-upload": "^0.1.0",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^2.6.1",
"webpack-dev-server": "^1.9.0"
}