React redux + react-loadable... How to make it work?

Question

I'm working in a react app and I'm using react-loadable and react-redux. When I started the project, I did not use react-redux and the Loadable component worked perfect. But now I want to use redux (I'm learning...) and I can not get it to work :(

I do not know what I have to do.

Thanks! (:

Error

Error image

index.js

import 'react-app-polyfill/ie9'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import * as serviceWorker from './serviceWorker';

import './index.css';
import {store} from './helpers';
import {App} from "./views/App";


ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

App.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Loadable from 'react-loadable';

import '../../App.scss';
import {history} from '../../helpers';
import LoadingSpinner from '../../components/Loading/LoadingSpinner';
import PrivateRoute from '../../components/PrivateRoute';
import {alertActions} from '../../actions/alert_actions';
// import {Login} from "../Pages/Login";

const loading = () => <LoadingSpinner/>;

const Login = Loadable({
  loader: () => import('../../views/Pages/Login')
    .then(state => {
      const {store} = this.props;
    }),
  loading
});

class App extends React.Component {
  constructor(props) {
    super(props);
  }


  render() {
    const {alert} = this.props;
    return (
      <HashRouter>
        <Switch>
          <Route exact path="/login" name="Login Page" component={Login}/>
        </Switch>
      </HashRouter>
    );
  }
}

function mapStateToProps(state) {
  const {alert} = state;
  return {
    alert,
  };
}

const connectedApp = connect(mapStateToProps)(App);
export {connectedApp as App};

score 2 · Answer 1 · answered Jan 29 '19 at 01:36

If you want to use your Login page component with redux and react-loadable, you have to import the Login page component container which is connected to the Redux store via connect() function. For example, your container would look something like this,

login.container.js

import { connect } from 'react-redux';
import { Login } from '../../views/Pages/Login'

const mapStateToProps = ...

const mapDispatchToProps = ...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

and then in order to lazy load it, you just have to import the previous file, instead of the component as the loader key.

App.js

...
const loading = () => <LoadingSpinner/>;

const Login = Loadable({
  loader: () => import('./login.container.ts'),
  loading
});
...

Now the component should work as expected with Redux.

React redux + react-loadable... How to make it work?

1 Answers1