0

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"
      }
Kamil Kwiecien
  • 51
  • 1
  • 10
  • You do not initialized the state for store. just return store from 'configureStore'. The implementation of 'index.js' is wrong.. please follow the redux documentation – Tariqul Islam May 23 '18 at 15:45
  • Problem solved. The real problem was with using combineReducers - I used combineReducers object in combineReducers, which worked before, but not in this case. – Kamil Kwiecien May 24 '18 at 00:34

0 Answers0