title: How to update the state of reducer?
body: <p>I'm passing the index (<code>id</code>) of the object in <code>posts</code> array in the state to be updated. I'm able to find the index of the element with <code>findIndex</code> and change the <code>number</code> key. I'm not able to figure out how do I pass the updated <code>object</code> back to the state/array.</p>
  
  <p>My Reducer: </p>
  
  <pre><code>const initialState = {
      posts: [
        {id:1, name:'post1', number:11},
        {id:2, name:'post2', number:22},
        {id:3, name:'post3', number:33}
     ]
  }
  
  export default function newData (state = initialState, action) {
  
    switch (action.type) {
  
      case "updateNumber": {
  
     // find object to update
      const index = state.posts.findIndex(({ id }) =&gt; id === action.payload);
  
      if (index &gt; -1 ) {
        const toIncrement = state.posts[index];
        const number = toIncrement.number++;
  
        // create new object with existing data and newly incremented number
        const updatedData = { ...toIncrement, number };
  
        // return new array that replaces old object with incremented object at index
       // the state is not getting updated with the following:
  
        return [...state.posts.slice(0, index), updatedData, ...state.posts.slice(index + 1)];
  
      }
  
        // return state if no object is found
        return state;
      }
  
    default:
      return state
    }
  }
  </code></pre>
  
  <p>What am I doing wrong? Is there any other way to update the state? Please help.</p>