React redux + реагирующая загрузка ... Как заставить это работать?

Question

Я работаю в приложении реагирования и использую react-loadable и react-redux. Когда я начинал проект, я не использовал react-redux, и загружаемый компонент работал отлично. Но теперь я хочу использовать излишний (я учусь ...) и не могу заставить его работать: (

Я не знаю, что мне делать.

Спасибо! (

---

Error

Ошибка изображения

---

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};

Answer 1

Если вы хотите использовать компонент страницы входа с избыточностью и реактивной загрузкой, вам необходимо импортировать контейнер компонента страницы входа, который подключен к хранилищу Redux через функцию connect (). Например, ваш контейнер будет выглядеть примерно так:

login.container.js

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

const mapStateToProps = ...

const mapDispatchToProps = ...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

и затем для его отложенной загрузки вам просто нужно импортировать предыдущий файл, а не компонент в качестве ключа загрузчика.

App.js

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

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

Теперь компонент должен работать как положено с Redux.