title: redux state updated, but doesn't trigger page change (re-render)
body: <p>I have seen below artilces, but my problem is different </p>
  
  <p><a href="http://redux.js.org/docs/faq/ReactRedux.html#react-not-rerendering" rel="nofollow noreferrer">http://redux.js.org/docs/faq/ReactRedux.html#react-not-rerendering</a></p>
  
  <p><a href="https://stackoverflow.com/questions/33140008/react-redux-store-updates-but-react-does-not">React-redux store updates but React does not</a></p>
  
  <p><a href="https://stackoverflow.com/questions/39513753/my-redux-state-has-changed-why-doesnt-react-trigger-a-re-render">My Redux state has changed, why doesn&#39;t React trigger a re-render?</a></p>
  
  <p>Chrome redux extension shows there is a diff (so no re-render is not by state mutation):
  <a href="https://i.stack.imgur.com/aALhO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aALhO.png" alt="enter image description here"></a></p>
  
  <p>But re-render not tigger.</p>
  
  <hr>
  
  <p>I am using react-boilerplate as base, and I am using Immutable.js</p>
  
  <h2>reducer:</h2>
  
  <pre><code>const initialState = fromJS({
    tags: [
      {
        id: 1,
        name:'t1',
        hexcolor: '#ccc',
        shortcut: 'ctrl+1',
        desc :'desc'
      }
    ],
  });
  
  const reducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case REQUEST_TAGS_SUCCESSED:
        return state.set('tags', action.tags)
      case ADD_TAG_SUCCESSED:
        return state.update('tags', arr =&gt; arr.push(action.tag))
      default:
        return state
    }
  }
  </code></pre>
  
  <h2>Selectors</h2>
  
  <pre><code>import { createSelector } from 'reselect';
  
  export const selectTagPage = (state) =&gt; state.get('tagPage');
  
  export const makeSelectTags = () =&gt; createSelector(
    selectTagPage,
    (state) =&gt; state.get('tags') &amp;&amp; state.get('tags').toJS()
  );
  </code></pre>
  
  <h2>TagPage(Index.js)</h2>
  
  <pre><code>export class TagPage extends React.PureComponent { 
  
    render() {
      const {tags, corpusId } = this.props;
  
      return (
        &lt;div&gt;
          &lt;TagTable data={tags} {...this.props} &gt;&lt;/TagTable&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = createStructuredSelector({
    tags: makeSelectTags(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      dispatch,
      requestTags: (corpusId) =&gt;
      dispatch({ type:REQUEST_TAGS, corpusId }),
      updateTag: (id, new_tag) =&gt;
      dispatch({ type: UPDATE_TAG, id , new_tag }),
      addTag: (tag) =&gt;
      dispatch({ type: ADD_TAG, tag }),
      deleteTag: (tag) =&gt;
      dispatch({ type: DELETE_TAG, tag }),
    };
  }
  
  const ConnectedTagPage = allCompose('tagPage', saga, reducer, mapStateToProps, mapDispatchToProps)(TagPage)
  
  ConnectedTagPage.defaultProps = {
    tags: [],
  }
  
  export default ConnectedTagPage;
  </code></pre>
  
  <h2>TagTable (TagPage's child)</h2>
  
  <pre><code>class TagTable extends React.PureComponent {
  
    constructor(props) {
      super(props);
  
    }
  
    render() {
      const {classes, data, tagColormap, updateTag, addTag, deleteTag } = this.props;
      const trigger = &lt;Button raised primary&gt;新增&lt;/Button&gt;
  
      return (
        &lt;div&gt;
          &lt;TagSubmitDialog title={'TAG'} trigger={trigger} obj={null} handleSubmit={(tag) =&gt; addTag(tag)} &gt;&lt;/TagSubmitDialog&gt;
          &lt;Table&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;TableCell&gt;名称&lt;/TableCell&gt;
                &lt;TableCell&gt;色值&lt;/TableCell&gt;
                &lt;TableCell&gt;快捷键&lt;/TableCell&gt;
                &lt;TableCell&gt;备注&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              {data &amp;&amp; data.map((n) =&gt; {
                return (
                  &lt;TableRow key={n.id}&gt;
                    &lt;TableCell&gt;
                      {n.name}
                    &lt;/TableCell&gt;
                    &lt;TableCell&gt;
                      {n.hexcolor}
                    &lt;/TableCell&gt;
                    &lt;TableCell&gt;
                      { n.shortcut}
                    &lt;/TableCell&gt;
                    &lt;TableCell&gt;
                      { n.desc}
                    &lt;/TableCell&gt;
                  &lt;/TableRow&gt;
                );
              })}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
  
        &lt;/div&gt;
      );
  
    }
  
  }
  </code></pre>
  
  <p>No matter how state change, TagTable does't change.</p>
  
  <p><a href="https://i.stack.imgur.com/C1QMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C1QMF.png" alt="enter image description here"></a></p>
  
  <h2>Debug detail:</h2>
  
  <p>select change too:
  <a href="https://i.stack.imgur.com/FhUba.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FhUba.png" alt="enter image description here"></a></p>
  
  <p>page also get new tags:
  <a href="https://i.stack.imgur.com/O2lpM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O2lpM.png" alt="enter image description here"></a></p>
  
  <p>table get new tags:</p>
  
  <p><a href="https://i.stack.imgur.com/wjleD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wjleD.png" alt="enter image description here"></a></p>