Redux state - Add/Edit/Remove object and its properties

Question

This is the reducer state. I need to add, update, remove the object in cartData. At the first time, cartData is empty.

const initialState = {
   fetchData: {},
   cartData: {}
}

Example:

fetchData: {
  "React":{'name': 'React'},
  "Node":{'name': 'Node'},
}

If user ADD_ITEM react book, new item is adding in the cart here.

cartData:{
  "React":{'name': 'React', 'quantity': 1}, 
}

If user Edit_ITEM react book, existing item is updating here.

cartData:{
  "React":{'name': 'React', 'quantity': 4}, 
}

If user REMOVE_ITEM react book, removing when its come to zero here.

cartData:{

}

How can we modify redux state for these actions?

Tried this: using lodash. But did't worked out correctly.

case types.ADD_ITEM:
   return { ...state, cartData: // add new item  }

case types.EDIT_ITEM:
   return { ...state, [state.cartData.name]: action.payload  }

case types.REMOVE_ITEM:
   return _.omit(state, [state.cartData.name]: action.payload)

Answer 1

You can use spread syntax for add and edit items and Object.keys() and reduce() for remove item.

const initialState = {
 fetchData: {},
 cartData: {}
}

function cartReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_ITEM':
    return {...state, cartData: {...state.cartData, ...action.payload}}
    
    case 'EDIT_ITEM':
    return {...state, cartData: {...state.cartData, ...action.payload}}
    
    case 'REMOVE_ITEM':
    let newState = Object.keys(state.cartData).reduce((r, e) => {
      if(!action.payload[e]) r[e] = state.cartData[e];
      return r
    }, {})
    
    return {...state, cartData: newState}
    
    default:
    return state;
  }
}

var state = {}

state = cartReducer(undefined, {
  type: 'ADD_ITEM',
  payload: {"React":{'name': 'React', 'quantity': 1}}
})
console.log(state)

state = cartReducer(state, {
  type: 'ADD_ITEM',
  payload: {"Node":{'name': 'Node', 'quantity': 2}}
})
console.log(state)

state =  cartReducer(state, {
  type: 'EDIT_ITEM',
  payload: {"React":{'name': 'React', 'quantity': 4}}
})
console.log(state)

state = cartReducer(state, {
  type: 'REMOVE_ITEM',
  payload: {"React":{'name': 'React', 'quantity': 1}}
})
console.log(state)