title: store.getState or mapStateToProps in Component
body: <p>I have a question that what is the difference between use getState from store directly or use mapStateToProps. Please look at me example below</p>
  
  <pre><code>import React, { Component } from 'react'
  import store from '../store'
  import { connect } from 'react-redux';
  
  class Test extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;p&gt;
          &lt;h1&gt;{this.props.count}&lt;/h1&gt;
          &lt;h2&gt;{store.getState().reducer1.count}&lt;/h2&gt;
        &lt;/p&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    count: state.reducer1.count
  });
  
  // export default Test;
  export default connect(mapStateToProps)(Test);
  </code></pre>
  
  <p>Both <strong>store.getState</strong> and <strong>mapStateToProps</strong> above work normally, it still updates when state change. If we just use getState only, we don't need to use <strong>connect</strong> method.</p>
  
  <p>Another point I've recognized is when use <strong>mapStateToProps</strong> with <strong>connect</strong>, in reducer we must return a new copy of object state than return that state with modification. If not, component will not update when state changed. Like this:</p>
  
  <pre><code>return Object.assign({}, state, {
          count: state.count + 1,
          payload: action.payload,
        });
  </code></pre>
  
  <p>But if we use <strong>store.getState()</strong>, we can either return a new copy or the revised one. Like this:</p>
  
  <pre><code>state.count++;
  state.payload = action.payload;
  return state
  </code></pre>
  
  <p>Anyone know please explain to me, thank you.</p>
  
  <p>P/S: and similar with store.dispatch vs mapDispatchToProps, those 2 will work normally, just want to know why we should use mapToProps with connect instead of call the function directly from the store.</p>