I have started splitting code with react-loadable and all was good until I wanted to use this.props. Digging deeper I found out that redux state is empty like createStore was not called at all. Console logs in createStore show that it is initiated and store object is passed correctly. Somehow it's not getting the reducers state it had before the change to react-loadable.
in the result I'm getting a lot of errors like:
Uncaught TypeError: Cannot read property 'error' of undefined
on
{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"
}