Redux state - add / edit / delete an object and its properties

Question

This is the state of the gearbox. I need to add, update, delete an object in cartData. For the first time, cartData is empty.

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

Example:

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

If the user ADD_ITEMresponds to the book, a new element is added here.

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

If the user Edit_ITEMresponds to the book, the existing item is updated here.

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

If the user REMOVE_ITEMresponds to the book, deleting it when it reaches zero here.

cartData:{

}

How can we change the state of reduction for these actions?

Tried this: using lodash. But it didn’t work out right.

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

add edit Object.keys() reduce() .

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)

Hide result

Answer 2

:

const editData = (items) => (dispatch) => {
        dispatch({type: 'EDIT_ITEMS', payload: items});
}

:

const reducer = (state = INITIAL_STATE, action){
    case 'EDIT_ITEMS': {
         if(_.isEmpty(action.payload)){
                 return {
                         ...state,
                         cartData: {},
                 };
         } else {
                 return {
                         ...state,
                         cellData: action.payload,
                 };
         }
    }
}

. payload , .

[EDIT:] , , deleting,

// Ref: https://github.com/erikras/react-redux-universal-hot-example/issues/962#issuecomment-219354496
export const removeByKey = (object, deleteKey) => {
  return Object.keys(object)
    .filter(key => key !== deleteKey)
    .reduce((result, current) => {
      result[current] = object[current];
      return result;
    }, {});
};

case types.REMOVE_ITEM:
   return { ...state, cartData: deleteKey(cartData, action.payload)) }

Answer 3

, . . .

export function reducer(state = initialState, action: any): State {
    switch(action.type) {
        case "ADD_TO_CART": {
            return {
                fetchData: state.fetchData,
                cartData: Object.assign({}, state.cartData, action.payload}
            };
        }
    }
    default: {
        return state;
    }
}

, :

dispatch({
    type: "ADD_TO_CART",
    payload: "React":{'name': 'React', 'quantity': 1}
})