title: React/Redux not triggering child render on state update
body: <p>I am learning React/Redux and came to a point where I am stuck.  In the sample todo app I am working on when a new todo is added the addTodo action is taken and I can step through the store.dispatch logic.  What fails is the haveStatePropsChanged value is calculated as false hence no child updates.</p>
  
  <p>The code snippets follow:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { store, addTodo, completeTodo, deleteTodo, clearTodo } from './TodoState.jsx';
  
  class AddTodoForm extends React.Component {
      ...
  }
  
  class TodoItem extends React.Component {
      ....
  }
  
  let TodoList = ({items}) =&gt; (
      &lt;ul&gt;
          {items.map((item,index) =&gt;
              &lt;TodoItem key={index} index={index} message={item.message} completed={item.completed}/&gt;
          )}
      &lt;/ul&gt;
  )
  
  let TodoComponent = ({ items, onAddTodo, onCompleteTodo, onDeleteTodo, onClearTodo }) =&gt; /* expand's props */
      (
          &lt;div&gt;
              &lt;h1&gt;Todo&lt;/h1&gt;
              &lt;AddTodoForm onAddTodo={onAddTodo} message/&gt;
              &lt;TodoList items={items} onCompleteTodo={onCompleteTodo} onDeleteTodo={onDeleteTodo} onClearTodo={onClearTodo}/&gt;
          &lt;/div&gt;
      )
  
  const mapStateToProps = (state) =&gt; {
      return {
          items: state.todo.items
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onAddTodo(message) {
              dispatch(addTodo(message))
          },
          onCompleteTodo(index) {
              dispatch(completeTodo(index))
          },
          onDeleteTodo(index) {
              dispatch(deleteTodo(index))
          },
          onClearTodo(index) {
              dispatch(clearTodo(index))
          }
      }
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(TodoComponent); 
  </code></pre>
  
  <p>The AddTodoForm correctly dispatches addTodo action, the issue is the TodoList component does not render again even through the items array is a new array.</p>
  
  <p>UPDATE: 
  My reducer does return a new state.</p>
  
  <p>Here is the reducer and action code:</p>
  
  <pre><code>import { createStore } from 'redux';
  var defaultState = { todo: { items: [] } } 
  
  const ADD_TODO = 1;
  const COMPLETE_TODO = 2;
  const DELETE_TODO = 3;
  const CLEAR_TODO = 4;
  
  const addTodo = (message) =&gt; { return {type: ADD_TODO, message: message, completed: false} };
  const completeTodo = (index) =&gt; { return {type: COMPLETE_TODO, index:index} };
  const deleteTodo = (index) =&gt; { return {type: DELETE_TODO, index:index} };
  const clearTodo = (index) =&gt; { return {type: CLEAR_TODO, index:index} };
  
  function todoReducer(state,action) {
      switch(action.type) {
          case ADD_TODO:
              var newState = Object.assign({},state);
              newState.todo.items.push({message:action.message,completed:false});
              return newState;
          case COMPLETE_TODO:
              var newState = Object.assign({},state);
              newState.todo.items[action.index].completed = true;
              return newState;
          case DELETE_TODO:
              var items = [].concat(state.todo.items);
              items.splice(action.index,1);
              return Object.assign({},state,{
                  todo: {
                      items:items
                  }
              });
          case CLEAR_TODO:
              return Object.assign({},state,{
                  todo: {
                      items: []
                  }
              });
          default:
              return state;
      }
  }
  
  var store = createStore(todoReducer,defaultState);
  
  export { store, addTodo, completeTodo, deleteTodo, clearTodo };
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Aaron</p>