Question

我正在使用React应用，正在使用react-loadable和react-redux。启动项目时，我没有使用react-redux，并且Loadable组件运行良好。但是现在我想使用redux（我正在学习...），但我无法使其工作：（

我不知道该怎么办。

谢谢！（：

错误

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

Answer 1

如果要使用具有redux和react-loadable的Login页面组件，则必须导入Login页面组件容器，该容器通过connect（）函数连接到Redux存储。例如，您的容器看起来像这样，

login.container.js

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click
        If Button5.Enabled = True Then
            Button5.Enabled = False
            Button6.Enabled = False
            Button7.Enabled = False
            Button8.Enabled = False
            Button9.Enabled = False
        ElseIf Button5.Enabled = False Then
            Button5.Enabled = True
            Button6.Enabled = True
            Button7.Enabled = True
            Button8.Enabled = True
            Button9.Enabled = True
        End If
    End Sub

然后为了延迟加载它，只需导入以前的文件，而不是将该组件作为加载器密钥即可。

App.js

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

const mapStateToProps = ...

const mapDispatchToProps = ...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

现在该组件应该可以在Redux上正常工作。

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

1 个答案: