title: React Trouble updating state with useReducer
body: <p>Utilizing React useReducer and attempting to do state update and have react re-render as I make changes.</p>
  
  <p>JSX calling the reducer:</p>
  
  <pre><code>&lt;button onClick={() =&gt; dispatch({ type: "DECREMENT", item })} &gt;+&lt;/button&gt;
  </code></pre>
  
  <p>and the useReducer:</p>
  
  <pre><code>const reducer = (state, action) =&gt; {
    const { item, type } = action;
    switch (type) {
      case "INCREMENT": {
        const newCart = state;
        const u = { ...item, quantity: item.quantity + 1 };
        const index = newCart.findIndex(eachitem =&gt; item.id === eachitem.id);
        newCart.splice(index, 1, u);
        console.log("INCREMENT", newCart);
        return newCart;
      }
      case "DECREMENT": {
        const newCart = state;
        const u = { ...item, quantity: item.quantity - 1 };
        const index = newCart.findIndex(eachitem =&gt; item.id === eachitem.id);
        newCart.splice(index, 1, u);
        console.log("DECREMENT", newCart);
        return newCart;
      }
      case "REMOVE": {
        return state.filter(eachitem =&gt; item.id !== eachitem.id);
      }
      default: {
        return state;
      }
    }
  };
  </code></pre>
  
  <p>Full code can be found below.</p>
  
  <p><a href="https://codesandbox.io/s/6wpmlrn11n?fontsize=14" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit codesandboxer-example"></a></p>