Redux 状态 - 添加/编辑/删除对象及其属性

Question

这是减速器状态。我需要添加、更新、删除cartData 中的对象。第一次，cartData 为空。

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

例子：

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

如果用户ADD_ITEM反应书，新项目将添加到这里的购物车中。

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

如果用户Edit_ITEM反应书籍，则现有项目将在此处更新。

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

如果用户REMOVE_ITEM反应书，当它在这里归零时删除。

cartData:{

}

我们如何修改这些操作的 redux 状态？

试过这个：使用lodash. 但没有正确解决。

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)