Redux UI wont update when changing state of nested array

Question

I'm fairly new to Redux.

My Web application is an eCommerce website where users have multiple carts (each with an id and name) and can place different items in each cart (inside an items array).

When a user deletes an item from the cart, my console.log() statements show that the carts array is being updated in the store, however the User interface doesn't reflect that unless i insert a new cart object inside of the carts array.

Why can't i update a nested array the same way i update a normal array in the store?
How do i fix this?

My initial Store

const intialStore = {
    carts: [],
    first_name : "ford",
    last_name : "doly"

}

My Reducer Function


export default function reducer (store = intialStore, action) {
    let {type, payload} = action;
    switch(type) {

     case DELETE_ITEM_IN_A_CART : {
    
                let carts = [...store.carts]
    
    
  let newCarts =   carts.map((cartItem, index) => {
    
                    if (index == payload.cartIndex){
    
                        let array = [...cartItem.items]
                        array.splice(payload.itemIndex, 1) 
    
                        cartItem.items = [...array  ]
                    }
    
                    
                    
    
                    return cartItem ;
                })
    
            
                console.log(carts)
    
                //carts[payload.cartIndex].items.splice(payload.itemIndex, 1)
    
               
               
                return {...store, carts : newCarts}
            }

       default:
          return {...store}
}

My Action Creator

export const deleteitemInCart = (cartIndex, itemIndex) => {
    return {
        type: DELETE_ITEM_IN_A_CART,
        payload: {
            cartIndex,
            itemIndex
        }
    }
}

Ethan Lipkind · Accepted Answer · 2020-07-30 15:14:53Z

1

+50

When you use the spread operator, you're only making a shallow copy. In your reducer, try using JSON.parse(JSON.stringify(carts)) in order to make a deep copy before performing the splice operation. This would ensure you are not mutating any existing state, but operating on a copy and returning a new copy at the end of the reducer.

answered Jul 30, 2020 at 15:14

Ethan Lipkind

1,1565 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0xD1x0n Over a year ago

You were 100% correct. Can't thank you enough as i have been stuck on this for 3/4 days now. I will award you the +50 rep when the timer allows me

Brian Thompson · Accepted Answer · 2020-07-27 20:45:10Z

1

map returns a new array, it does not mutate the original (which is good, we don't want to mutate it). But this means in order for your mapping actions to be persisted, you need to assign the result to a variable.


let newCarts = carts.map(...)

...

return {...store, carts: newCarts}

Right now, you're just returning the same carts array as the new state.

answered Jul 27, 2020 at 20:45

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

1 Comment

0xD1x0n Over a year ago

I did that but the updated items array is still not being reflected on the UI

Collectives™ on Stack Overflow

Redux UI wont update when changing state of nested array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related