Не могу соединить два компонента в React-Redux - PullRequest
Новая
       15

Не могу соединить два компонента в React-Redux

0 голосов
/ 05 июля 2019

Я хочу экспортировать два компонента, подключенных к Redux, но он не работает.

В коде App.jsx, как это: 

export default {
    App: connect(mapDispatchToProps)(App),
    ConnectedList: connect(mapStateToProps)(ConnectedList)
  }

Я подключаю два компонента, но проблема в том,что приложение больше не распознается в моем index.js или приложение никогда не экспортировалось, не знаю. Пожалуйста, совет. 

   import React from "react";
    import { render } from "react-dom";
    import { Provider } from "react-redux";
    import store from "./js/store/configureStore";
    import App from "./js/components/App.jsx";
    // if you're in create-react-app import the files as:
    // import store from "./js/store/index";
    // import App from "./js/components/App.jsx";
    render(
      <Provider store={store}>
ERROR Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 
        <App /> // 
      </Provider>,
      // The target element might be either root or app,
      // depending on your development environment
      // document.getElementById("app")
      document.getElementById("root")
    );

Вот мой App.jsx 

import React, { Component } from "react";
import { connect } from "react-redux";
import List from "./List.jsx";
import Form from "./Form.jsx";
import Toasts from "./Toasts";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { addToast } from "../actions/index";
import { MDBNotification } from "mdbreact";

class App extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        const { addToast } = this.props.actions;
        addToast({ text: "Hello, World!" });
    }

    render() {
        return (
            <main>
                <div className="row mt-5">
                    <div className="col-md-4 offset-md-1">
                        <h2>Articles</h2>
                        <List />
                    </div>
                    <div className="col-md-4 offset-md-1">
                        <h2>Add a new article</h2>
                        <Form />
                    </div>
                    <Toasts />
                </div>
                <Toasts />
            </main>
        );
    }
}

App.propTypes = {
    actions: PropTypes.shape({
        addToast: PropTypes.func.isRequired
    }).isRequired
};

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators({ addToast }, dispatch)
});


const mapStateToProps = state => {
    return { badword: state.rootReducer.badword };
};

const ConnectedList = ({ badword }) => (
    <ul>
        var dd = badword;
        <MDBNotification
            show
            fade
            title="Bootstrap"
            message="Word is badword"
        text="11 mins ago"
        style={{
            position: "absolute",
            top: 0,
            right: 0
        }}
        />
      </ul>

);
export default {
    App: connect(mapDispatchToProps)(App),
    ConnectedList: connect(mapStateToProps)(ConnectedList)
  }
...