title: Redux unwanted effect on .splice()
body: <p><strong>Hello everyone </strong></p>
  <p>Today I'm trying to make a cart with redux and i'm on the step who i have a button for <code>remove</code> the product entirely.</p>
  <p>If i have 2 products or more in my redux store and i want to remove the first, all the cart will be deleted.</p>
  <p>If i remove the last product in all case, the product will be deleted fine.</p>
  <blockquote>
  <p>That i expect is to remove the product entirely from the cart ( redux store )</p>
  </blockquote>
  This is my cartReducer:
  <pre><code>
  export function CartReducer(state = initialCart, action){
      switch (action.type){
          case 'ADD_PRODUCT_TO_CART_ACTION':
              const products = [...state[state.length -1].products]
              products.push({...action.payload.data})
              return [...state,  {products}];
  
          case 'UPDATE_QUANTITY_FROM_CART_ACTION':
              let cart = [...state]
              for (let i = 0; i &lt; cart[cart.length -1].products.length; i++){
                  if (cart[cart.length -1].products[i].attributes.id === action.payload.attributeID
                   &amp;&amp; cart[cart.length -1].products[i].productID === action.payload.productID){
                      cart[cart.length -1].products[i].attributes.quantity++
                  }
              }
              return [...state, ...cart];
  
          case 'REMOVE_QUANTITY_FROM_CART_ACTION':
              let Cart = [...state]
              for (let i = 0; i &lt; Cart[Cart.length -1].products.length; i++) {
                  if (Cart[Cart.length -1].products[i].attributes.id === action.payload.attributeID
                      &amp;&amp; Cart[Cart.length -1].products[i].productID === action.payload.productID){
                      const currentQuantity = Cart[Cart.length -1].products[i].attributes.quantity - 1
                      if (currentQuantity === 0){
                          Cart[Cart.length -1].products.splice(i, 1)
                      } else {
                          Cart[Cart.length -1].products[i].attributes.quantity--
                      }
                  }
              }
              return [...state, ...Cart];
  
          case 'TRASH_PRODUCT_FROM_CART_ACTION':
              let basket = [...state]
              for (let i = 0; i &lt; basket[basket.length -1].products.length; i++){
                  if (basket[basket.length -1].products[i].productID === action.payload.productID) {
                      basket[basket.length -1].products.splice(i)
                      return [...state, ...basket]
                  }
              }
              return [...state, ...basket];
  
          default:
              return state;
      }
  }
  
  </code></pre>
  My initial cart:
  <pre class="lang-js prettyprint-override"><code>const initialCart = [
      {
          products: [],
          totalPrice: 0
      },
  ]
  </code></pre>
  The result in my redux store with this <code>ADD_PRODUCT_TO_CART_ACTION</code> * 3:
  <pre class="lang-json prettyprint-override"><code>{
    &quot;products&quot;: [
      {
        &quot;productID&quot;: 14,
        &quot;attributes&quot;: {
          &quot;id&quot;: 17,
          &quot;price&quot;: 24.9,
          &quot;quantity&quot;: 1
        }
      },
      {
        &quot;productID&quot;: 11,
        &quot;attributes&quot;: {
          &quot;id&quot;: 13,
          &quot;price&quot;: 30.9,
          &quot;quantity&quot;: 1
        }
      },
      {
        &quot;productID&quot;: 10,
        &quot;attributes&quot;: {
          &quot;id&quot;: 15,
          &quot;price&quot;: 45.9,
          &quot;quantity&quot;: 1
        }
      }
    ]
  }
  </code></pre>
  If i remove the latest product with the <code>TRASH_PRODUCT_FROM_CART_ACTION</code> * 1:
  <pre class="lang-json prettyprint-override"><code>{
    &quot;products&quot;: [
      {
        &quot;productID&quot;: 14,
        &quot;attributes&quot;: {
          &quot;id&quot;: 17,
          &quot;price&quot;: 24.9,
          &quot;quantity&quot;: 1
        }
      },
      {
        &quot;productID&quot;: 11,
        &quot;attributes&quot;: {
          &quot;id&quot;: 13,
          &quot;price&quot;: 30.9,
          &quot;quantity&quot;: 1
        }
      }
    ]
  }
  </code></pre>
  You can see here the latest product as been removed as well:
  <pre class="lang-json prettyprint-override"><code>{
    &quot;productID&quot;: 10,
    &quot;attributes&quot;: {
      &quot;id&quot;: 15,
      &quot;price&quot;: 45.9,
      &quot;quantity&quot;: 1
    }
  }
  </code></pre>
  <ol>
  <li>But if i remove by example the first element everything will be deleted.</li>
  <li>Or if i remove the second element, everything in the right in the array of object will be deleted</li>
  </ol>
  <h3>You can see below the unexpected effect :</h3>
  <p><code>first case</code>:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;products&quot;: []
  </code></pre>
  <p><code>second case</code>:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;products&quot;: [
      {
        &quot;productID&quot;: 14,
        &quot;attributes&quot;: {
          &quot;id&quot;: 17,
          &quot;price&quot;: 24.9,
          &quot;quantity&quot;: 1
        }
      }
    ]
  </code></pre>
  <p>I have try findIndex, my own findIndex with loop, or another indexOf they have the same issue.</p>
  <p>Same issue for the <code>REMOVE_QUANTITY_FROM_CART_ACTION</code> if the quantity is 0 the product is removed yeah, but they remove another product with it.</p>
  <p>Sorry for my very bad english.</p>