title: Typescript with react-redux mapStateToProps called but component did not rerender
body: <p>lots of topics on this one but they are almost all about the state being mutated somehow, which is not my case I believe. So I have a state that is shared between two component.</p>
  
  <pre><code>export interface ImageStoreState {
      readonly name : string;
  }
  </code></pre>
  
  <p>The reducer,</p>
  
  <pre><code>export function imageActionReducer(state: ImageStoreState, action:ImageActions): ImageStoreState {
    // Set up initial states
    if (state === undefined)
    {
      state = {
        name: ""
      }
    }
  
    console.log("original state", state);
    switch (action.type) {
        case getType(imageActions.saveImageMeta):
          console.log("SaveImageMeta Reducer.");
          return { ...state, 
            name: action.payload.name 
          };
      }
  
    console.error("No matching reducer.");
    return state;
  }
  </code></pre>
  
  <p>The container,</p>
  
  <pre><code>export function mapStateToProps(state: ImageStoreState) : IAddImageControlProps {
    const { name } = state;
    console.log("Add image control container, mapStateToProps", state);
    return {
        imageChosen: name
    }
  }
  
  export function mapDispatchToProps() {
    return {
        // 
    };
  }
  
  export const AddImageControlContainer 
    = connect&lt;IAddImageControlProps, {}, IAddImageControlProps, ImageStoreState&gt;(mapStateToProps, mapDispatchToProps)(AddImageControl);
  </code></pre>
  
  <p>The presentation component,</p>
  
  <pre><code>export interface IAddImageControlProps {
    imageChosen?: string;
    // onImageAdded?: (im: ImageFile) =&gt; any;
  }
  
  export class AddImageControl extends React.Component&lt;IAddImageControlProps, {}&gt; {
    constructor(props : IAddImageControlProps) {
        super(props);
    }
  
    public componentWillReceiveProps(nextProps: IAddImageControlProps) {
      console.log('componentWillReceiveProps', nextProps);
    }
  
    public render() : JSX.Element {
      const { imageChosen } = this.props;
  
      let isEnabled = false;
      if (imageChosen !== undefined)
      {
        isEnabled = true;
        console.log(imageChosen);
      }
      console.log("Should enbale:" + isEnabled);
  
      return (
        &lt;section&gt;
          &lt;Button type="button" color="success" disabled={!isEnabled}&gt;Add it!&lt;/Button&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am using redux dev-tools so I can see the states are changing,
  <a href="https://i.stack.imgur.com/CoAZq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoAZq.png" alt="enter image description here"></a></p>
  
  <p>But the lines</p>
  
  <pre><code>console.log('componentWillReceiveProps', nextProps);
  
  console.log("Should enbale:" + isEnabled);
  </code></pre>
  
  <p>Never get called!</p>
  
  <p>Thank you in advance, everyone! I have been wondering this for a few days already.</p>