title: Component not re-render when dispatch action in Redux
body: <p>I am learning about Redux and ran into the problem below. My component doesn't re-render when dispatch action <code>changeStatus</code>, but works when dispatch <code>actionRemove</code>. Let me know why? Thanks.</p>
  <p>code here
  <code>reducer</code></p>
  <pre><code>const HandleTaskReducer = (state = initializeState, action) =&gt; {
  
      switch (action.type) {
          case addTask: {
              let list = state.tasks;
              list.push(action.payload);
              localStorage.setItem('todos', JSON.stringify(list));
              return {
                  ...state,
                  tasks: list
              };
          }
          case completeTask: {
              let list = state.tasks;
              let index = list.findIndex((value =&gt; value.id === action.payload));
              if (index &gt; -1) {
                  list[index].status = true;
                  localStorage.setItem('todos', JSON.stringify(list));
              }
              return {
                  ...state,
                  tasks: list
              };
          }
          case removeTask: {
              let list = state.tasks;
              let index = list.findIndex((value =&gt; value.id === action.payload));
              if (index &gt; -1) {
                  list.splice(index, 1);
                  localStorage.setItem('todos', JSON.stringify(list));
              }
              return {
                  ...state,
                  tasks: list
              };
          }
          default: {
              return {...state};
          }
      }
  }
  </code></pre>
  <p>this is code in component</p>
  <pre><code>const TaskItemComponent = props =&gt; {
      const className = !props.task.status ? 'item-task bg-grey' : 'item-task bg-grey success';
  
      const removeTask = () =&gt; {
          props.remove(props.task.id);
      }
  
      const changeStatus = () =&gt; {
          props.completeTask(props.task.id);
      }
      return (
          &lt;div className={className}&gt;
              &lt;div className=&quot;content-task&quot;&gt;
                  &lt;h3&gt;{props.task.name}&lt;/h3&gt;
                  &lt;p&gt;{props.task.description}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div className=&quot;action-task&quot;&gt;
                  {!props.task.status &amp;&amp; &lt;button onClick={changeStatus} className=&quot;btn&quot;&gt;Complete&lt;/button&gt;}
                  &lt;button className=&quot;btn&quot; onClick={removeTask}&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          remove: id =&gt; {
              dispatch(actionRemove(id))
          },
          completeTask: id =&gt; {
              dispatch(actionComplete(id));
              console.log(id)
          }
      }
  }
  
  export default connect(null, mapDispatchToProps)(TaskItemComponent);
  </code></pre>
  <p>this is ListTaskComponent</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import TaskItemComponent from &quot;./TaskItemComponent&quot;;
  import {connect} from &quot;react-redux&quot;;
  
  const ListTaskComponent = props =&gt; {
      const [tasks, setTasks] = useState([]);
  
      useEffect(() =&gt; {
          setTasks(props.taskState.tasks);
      }, []);
  
      const list = tasks.map(value =&gt;
          &lt;TaskItemComponent
              key={value.id.toString()} task={value}/&gt;
      );
      return (
          &lt;section id=&quot;wrap-task&quot; className=&quot;mt-3&quot;&gt;
              {list}
          &lt;/section&gt;
      )
  }
  
  const mapStateToProps = state =&gt; {
      return {
          taskState: state.taskReducer,
      }
  }
  
  export default connect(mapStateToProps, null)(ListTaskComponent)
  </code></pre>