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

【问题标题】：Redux state - Add/Edit/Remove object and its propertiesRedux 状态 - 添加/编辑/删除对象及其属性
【发布时间】：2018-04-19 17:27:15
【问题描述】：

这是减速器状态。我需要添加、更新、删除 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)

【问题讨论】：

您在寻找减速器和动作调度器吗？
寻找reducer来更新状态。

标签： javascript reactjs react-native redux lodash

【解决方案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)

【讨论】：

【解决方案2】：

很难确切地知道您在尝试什么。下面是一个带有添加到购物车方法的 reducer 函数的示例。您需要为每个场景添加一个类似的方法。

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

【讨论】：

【解决方案3】：

在行动中：

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 应该是您在任何时间点都在购物车中的所有物品。

[编辑：] 由于问题已被编辑，您也可以使用 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)) }

【讨论】：