title: Redux/React: You must pass a component to the function returned by connect. Instead received {}
body: <p>I'm new to react/redux. After created a project using create-react-app, I modified the index.js and App.js:</p>
  
  <h1>index.js</h1>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  
  function reducer() {
      return {
          message: 'hello, world'
      };
  }
  
  const store = createStore(reducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
    &lt;App /&gt;
    &lt;/Provider&gt;, 
    document.getElementById('root')
  )
  
  registerServiceWorker();
  </code></pre>
  
  <h1>App.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import { connect } from "react-dedux";
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;The message: {this.props.msg}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  function mapStateToProps(state) {
    return {
      msg: state.message
    };
  }
  
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p>This is the simplest demo version I'm trying.
  The error message is "You must pass a component to the function returned by connect. Instead received {}". I've been comparing my code with quite some tutorials but couldn't find the root cause. </p>