无法在React-Redux中连接两个组件

Question

我想导出两个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)
  }