时间戳

首页 > 解决方案 > React redux + react-loadable ...如何使其工作？

reactjs - React redux + react-loadable ...如何使其工作？

问题描述

我正在使用 react 应用程序，并且正在使用react-loadableand react-redux。当我开始项目时，我没有使用react-reduxLoadable 组件，并且运行良好。但现在我想使用 redux（我正在学习......）但我无法让它工作:(

我不知道我必须做什么。

谢谢！（：

错误

错误图片

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')
);

应用程序.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};

标签： reactjsreduxreact-reduxreact-loadable

解决方案

如果你想将登录页面组件与 redux 和 react-loadable 一起使用，你必须导入登录页面组件容器，该容器通过 connect() 函数连接到 Redux 存储。例如，您的容器看起来像这样，

login.container.js

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

const mapStateToProps = ...

const mapDispatchToProps = ...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

然后为了延迟加载它，您只需导入以前的文件，而不是组件作为加载器键。

应用程序.js

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

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

现在该组件应该可以在 Redux 中按预期工作。

推荐阅读