title: why in react flux: component this.state is updated automatically when store changed?
body: <p>I am confused why in component as bellows, this.state is automatically changed when corresponding store updated?</p>
  
  <p>The compoenent is listening to MyStore. Once the number there changed, it will call <code>onchange()</code> in the component, which is supposed to get the new number from store by calling <code>this.getStateFromStores()</code>. It works.  However, my question is: I added this line <code>const alreadyHasNewData = this.state;</code> to check <code>this.state</code> before <code>getStateFromStores()</code>.<br>
  Debug found that <code>this.state</code> is already updated in sync with store, how come this could happen?</p>
  
  <p>Any help thanks!</p>
  
  <pre><code>class My-component {
  
      constructor() {
          super();
          this.state = this.getStateFromStores(); // default number is 8;
      }
  
      private userClicked() =&gt; void = () =&gt; {
          int newNumber = 9;
          MyActionCreators.userClicked(newNumber);
      };
  
      private onChange: () =&gt; void = () =&gt; {
      // Why this.state is already has new number in store, which is 9?
          const alreadyHasNewData = this.state;
  
      // I think only this line will get updated number in store, which is 9.
          const data = this.getStateFromStores();
  
          this.setState({
              weekMeetingCardData: data.weekMeetingCardData     
          });
      }
  
      componentDidMount(): void {
          MyStore.addListener(this.onChange);
      }
  
      componentWillUnmount(): void {
          MyStore.removeListener(this.onChange);
      }
  
      protected getStateFromStores() {
          return {
              MyStore.getNumber();
          }
      }
  }
  </code></pre>