title: Redux not re-rendering when nested object gets updated
body: <p>Please refer to the below function for this question:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      currentPlaylist: state.currentPlaylist,
      currentSong: state.currentSong,
      localPlaylists: state.playlistsBySource['local'],
      videoSize: state.videoSize,
    };
  }
  </code></pre>
  
  <p>This is <code>mapStateToProps</code> function for a container. I expected the component that's connected to this container to be re-rendered every time <code>state.playlistsBySource['local']</code> was updated. However, it didn't render even if <code>state.playlistsBySource['local']</code> updated so I changed the code to below:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      currentPlaylist: state.currentPlaylist,
      currentSong: state.currentSong,
      playlists: state.playlistsBySource,
      videoSize: state.videoSize,
    };
  }
  </code></pre>
  
  <p>Then the connected component was correctly updated every time <code>state.playlistsBySource['local']</code> was updated. But this is a kind of a waste because the connected component does not need the entire <code>playlists</code>.</p>
  
  <p>Why is this exactly happening, and what's the correct way to solve it?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I connect the component like this:</p>
  
  <pre><code>export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(DumbComponent);
  </code></pre>
  
  <p>The render method of <code>DumbComponent</code> doesn't get called when <code>state.playlistsBySource['local']</code> has been updated in the global store.</p>
  
  <p><strong>UPDATE2: Reducer seems to be immutable.. am I missing something?</strong></p>
  
  <pre><code>case CONSTANTS.UPDATE_LOCAL_PLAYLIST:
    var playlistUpdated = transformedPlaylist(state[action.playlist.source], action);
    return updatedPlaylists(playlistUpdated, state);
  
  function transformedPlaylist(state=[], action) {
    var oldPlaylist = _.find(state, (pl) =&gt;
      pl.playlistName === action.playlist.playlistName);
  
    switch (action.type) {
      case CONSTANTS.RECEIVE_PLAYLIST:
      case CONSTANTS.UPDATE_LOCAL_PLAYLIST:
        return Object.assign({}, oldPlaylist, action.playlist, {
          isFetching: false,
        });
      default:
        return oldPlaylist
    }
  }
  
  function updatedPlaylists(playlistUpdated, oldPlaylists) {
    const source = playlistUpdated.source;
    const idxToUpdate = _.findIndex(oldPlaylists[source], (pl) =&gt;
      pl.playlistName === playlistUpdated.playlistName
    );
    var playlists = Object.assign({}, oldPlaylists);
    playlists[source][idxToUpdate] = playlistUpdated;
    return playlists;
  }
  </code></pre>