Redux 状态 - Add/Edit/Remove 对象及其属性

Question

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

在行动中：

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

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

Answer 3

您可以对 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)

Redux 状态 - Add/Edit/Remove 对象及其属性

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

javascript

lodash

reactjs

react-native

redux