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

user_3694459 0
Viewed 10718

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)
lodash redux react-native reactjs javascript
3 Answers

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)

user_46207710

In actions:

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

In reducer: 

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

This should be the way to do it. payload should be all the items you've in the cart at any point of time.

[EDIT:] As the question has been edited, You can also do that using deleting a key, using

// 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)) }
user_26482160

It's hard to know exactly what you are trying. Below is an example of a reducer function with an add to cart method. You'll need to add a similar method for each of your scenarios.

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;
    }
}

You will then dispatch the action by calling the dispatch function:

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