title: Components are not updated properly when the store change
body: <h2>I'm developing a react application and the data are not displayed correctly, when the post button is trigged a new row is inserted, but the data associated with those are not displayed at the right index.</h2>
  
  <h2>| HERE | 232 |</h2>
  
  <p>Now, the "HERE" string is at index 232, after i trigged the button which just add an element to the store array i see "HERE" string at 233, which is incorrect because HERE should keep its index.</p>
  
  <p>I've tried some different approach: purecomponents, copy the data from the store to the component state. </p>
  
  <pre class="lang-js prettyprint-override"><code> &lt;table border="2"&gt;
                {this.props.chapters.map((chapter, index) =&gt; {
                  return &lt;TableRow chapter={chapter} key={index} /&gt;;
                })}
              &lt;/table&gt;
  </code></pre>
  
  <p>TableRow</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component, Fragment } from "react";
  
  class TableRow extends Component {
    state = {
      title: ""
    };
    static getDerivedStateFromProps(nextProps, prevState) {
      return {
        title: nextProps.chapter.title,
        id: nextProps.chapter.id
      };
    }
    render() {
      return (
        &lt;Fragment&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;input
                type="text"
                value={this.state.title}
                onChange={e =&gt; {
                  this.setState({ ...this.state, title: e.target.value });
                }}
              /&gt;
            &lt;/td&gt;
            &lt;td&gt;{this.state.id}&lt;/td&gt;
            &lt;td&gt;{this.props.exposure}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default TableRow;
  
  </code></pre>
  
  <p>The reducer, but POST_CHAPTER works fine, the array is dispatched correctly, the problem is React.</p>
  
  <pre><code>import {
    FETCH_ALL_CHAPTER,
    POST_CHAPTER,
    PUT_CHAPTER,
    DELETE_CHAPTER
  } from "../actions/ChapterActions";
  const INITIAL_STATE = {
    chapter_list: []
  };
  export default function chapterReducer(state = INITIAL_STATE, action) {
    switch (action.type) {
      case FETCH_ALL_CHAPTER:
        return { ...state, chapter_list: [...action.payload] };
      case DELETE_CHAPTER:
        let chaptersCopy0 = state.chapter_list.filter(
          s =&gt; s.uuid !== action.payload
        );
        return {
          ...state,
          chapter_list: [...chaptersCopy0]
        };
      case POST_CHAPTER:
  
        return {
          ...state,
          chapter_list: [
           ...action.payload,
            ...state.chapter_list
          ]
        };
      case PUT_CHAPTER:
        let indexToSub = state.chapter_list.findIndex(
          s =&gt; s.uuid === action.payload.uuid
        );
        let chaptersCopy1 = [...state.chapter_list];
        chaptersCopy1[indexToSub] = action.payload;
        return {
          ...state,
          chapter_list: [...chaptersCopy1]
        };
      default:
        return state;
    }
  }
  
  </code></pre>
  
  <p>The action: </p>
  
  <pre><code>export function postChapter(customer_uuid, assessment_uuid, chapter_data) {
    let url = `${ROOT_URL}/x/${customer_uuid}/assessmentcontainers/${assessment_uuid}/chapters/`;
    return dispatch =&gt; {
      return axios
        .post(url, chapter_data)
        .then(res =&gt; {
          dispatch({
            type: POST_CHAPTER,
            payload: res.data
          });
          dispatch(
            notifSend({
              message: "Created",
              kind: "success",
              dismissAfter: 2000
            })
          );
          return res;
        })
        .catch(error =&gt; {
          console.log(error);
          if (error !== UNAUTHORIZED_ERROR)
            dispatch(
              notifSend({
                message: messageStatus(error),
                kind: "danger",
                dismissAfter: 2000
              })
            );
          return { status: error.status };
        });
    };
  }
  
  </code></pre>