title: React-redux connect() fails to pass the props
body: <p>I'm trying to learn react-redux architecture, and I failed on the most basic stuff.</p>
  
  <p>I created class HomePage and used react-redux connect() to connect it to store's state and dispatch.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import {HomeButtonClickAction} from "./HomeActionReducer";
  import {connect} from "react-redux";
  
  class HomePage extends Component {
  
      constructor(props) {
          super(props);
  
          console.log('HomePage props');
          console.log(this.props);
  
          this.buttonClicked = this.buttonClicked.bind(this);
      }
  
      buttonClicked() {
          console.log('button cliked');
          this.props.buttonClick();
      }
  
      render() {
          console.log('Re-rendering...');
  
          let toggleState = this.props.toggle ? 'ON' : 'OFF';
          return (
              &lt;div&gt;
                  &lt;button onClick={this.buttonClicked}&gt;{ toggleState }&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  HomePage.propTypes = {
      toggle: PropTypes.bool.isRequired,
      onClick: PropTypes.func.isRequired
  };
  
  const mapStateToProps = (state, ownProps) =&gt; {
      return {
          toggle: state.toggle
      }
  };
  
  const mapDispatchToProps = (dispatch, ownProps) =&gt; {
      return {
          buttonClick: () =&gt; {
              dispatch(HomeButtonClickAction());
          }
      }
  };
  
  const HomeContainer = connect(
      mapStateToProps,
      mapDispatchToProps
  )(HomePage);
  
  export default HomePage;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But it's not working for me. HomeContainer doesn't pass props to HomePage component. 
  I've got these warnings in devtools.</p>
  
  <p><a href="https://i.stack.imgur.com/jHXPT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jHXPT.png" alt="enter image description here"></a></p>
  
  <p>My index.js looks like this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import AppReducer from "./reducers/AppReducer";
  import { createStore } from "redux";
  import { Provider } from 'react-redux';
  
  const store = createStore(AppReducer);
  
  ReactDOM.render(
      &lt;Provider store={ store }&gt;
          &lt;App/&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  
  registerServiceWorker();</code></pre>
  </div>
  </div>
  </p>
  
  <p>and AppReducer.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { combineReducers } from 'redux';
  import { toggle } from '../home/HomeActionReducer';
  
  const AppReducer = combineReducers({
      toggle
  });
  
  export default AppReducer;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and HomeActionReducer.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const HOME_BUTTON_CLICK = 'HOME_BUTTON_CLICK';
  
  export function toggle (state = true, action) {
      console.log('toggle launched');
  
      switch (action.type) {
          case HOME_BUTTON_CLICK :
              return !state;
  
          default:
              console.log('Toggle reducer default action');
              return state;
      }
  }
  
  export function HomeButtonClickAction() {
      console.log('action emitted');
  
      return {
          type: HOME_BUTTON_CLICK
      };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Being a newbie I'll really appreciate your help :)</p>