title: How to make the filters work in this todo app created using react and redux?
body: <p>Edit:</p>
  
  <p>Changing the code as per Andrew's suggestion works. </p>
  
  <p>I'm making a todo app using redux. I'm facing problem with filters ( show all todo, show active todo, show completed ).
  The filters are returning new state. For instance, If I have 6 Todo tasks in my state and if 2 of them are completed. Now if I click on show completed filter it returns 2 tasks which is correct. But then if I click on show active or show all filter, it returns values from those 2 tasks and not from the earlier 6 tasks.</p>
  
  <p>My app state is </p>
  
  <pre><code>state: {todo: []}
  </code></pre>
  
  <p>My Todo Item is</p>
  
  <pre><code>[
   {id: 1, text: 'Save Gotham!!', completed: false},
   {id: 2, text: 'Buy new jet', completed: true}
  ]
  </code></pre>
  
  <p><strong>Actions</strong></p>
  
  <pre><code>export function showAllTodo(state){
    // state will have id,text and completed flag, this is not same as app state
    return {
      type: SHOW_ALL_TODO,
      payload: state
    }
  };
  
  export function showCompletedTodo(state){
    let completedTodo = state.todo.filter( (item) =&gt; item.completed);
    return {
      type: SHOW_COMPLETED,
      payload: {todo: completedTodo}
    }
  };
  
  
  export function showActiveTodo(state){
    let activeTodo =  state.todo.filter( item =&gt; !item.completed)
    return {
      type: SHOW_ACTIVE,
      payload: {todo: activeTodo}
    }
  };
  </code></pre>
  
  <p><strong>Reducer</strong></p>
  
  <p>//Sample reducer</p>
  
  <pre><code>case SHOW_COMPLETED:
    return action.payload;
  break;
  </code></pre>