title: Redux Container and mapDispatchToProps
body: <p>I'm using react-redux to Redux together with React. Console log in App.js for this.props and this.props.fetchProducts return an empty object and undefined respectively. </p>
  
  <p>The first question I want to ask is - why is that the case and how do I fix it. </p>
  
  <p>The second question I have is - how do I pass down store to CartPage and MainPage? Or is that not recommended since we should use connect to pass whatever state value we need to our component instead?</p>
  
  <p>Much thanks.</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const rootReducer = combineReducers({
    ProductsReducer,
    PriceReducer,
    UserReducer
  });
  
  const store = compose(applyMiddleware(...middlewares))(createStore)(rootReducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;, 
    document.getElementById('root'));
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
  
    constructor(props) {
      super(props);
      console.log(this.props);
      console.log(this.props.fetchProducts);
    }
  
    render() {
      return (
        &lt;Switch&gt; 
          &lt;Route exact path='/cart' render={() =&gt; &lt;CartPage /&gt;} /&gt;
          &lt;Route exact path='/' render={() =&gt; &lt;MainPage /&gt;} /&gt;
        &lt;/Switch&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>AppContainer</strong></p>
  
  <pre><code>import { connect } from 'react-redux';
  import { FetchProducts } from '../actions/FetchProducts';
  import App from '../App';
  
  const mapDispatchToProps = dispatch =&gt; ({
    fetchProducts: () =&gt; dispatch(FetchProducts())
  });
  
  export default connect(null, mapDispatchToProps)(App);
  </code></pre>