时间戳

首页 > 解决方案 > NgrxStore - 第一个对象被插入到数组中

angular - NgrxStore - 第一个对象被插入到数组中

问题描述

我正在玩ngrx存储，删除，获取和编辑数组中的元素工作得很好，但问题是当我第一次将对象插入到数组中时{id：1，名称：'Potato'，数量：2} ，插入两个完全相同的对象，除非我像下面的减速器一样过滤它。

状态

export const initialShoppingState: ShoppingState = {
    shoppingList: [],
};

这个可行，但可能我不应该过滤它以防止添加相同的对象

on(ShoppingAction.shoppingItemAdded, (state, { shoppingItem }) => {
    console.log(state);
    return ({ ...state, shoppingList: [...state.shoppingList.filter((item) => item.id !== shoppingItem.id), shoppingItem] });
}),

这个添加第一项两次，下一项仅添加一次。

on(ShoppingAction.shoppingItemAdded, (state, { shoppingItem }) => {
    console.log(state);
    return ({ ...state, shoppingList: [...state.shoppingList.concat(shoppingItem)] });
}),

标签： angulartypescriptngrxngrx-store

解决方案

从代码来看，这是预期的行为，这不是商店可以解决的问题。

问题是您将一个项目附加到数组中。唯一的解决方案是使用filter你所做的。

如果您将状态构造为字典，则不会出现此问题，因为id它将是唯一的。有关详细信息，请参阅规范化状态。

请参阅此示例。

export const initialState: State = {
  cartItems: {},
};

export function reducer(state = initialState, action: CartActions) {
  switch (action.type) {
    case CartActionTypes.AddToCart:
      return {
        ...state,
        cartItems: {
          ...state.cartItems,
          [action.payload.sku]: (state.cartItems[action.payload.sku] || 0) + 1,
        },
      };

    case CartActionTypes.RemoveFromCart:
      return {
        ...state,
        cartItems: {
          ...state.cartItems,
          [action.payload.sku]: Math.max((state.cartItems[action.payload.sku] || 0) - 1, 0),
        },
      };

    case CartActionTypes.EmptyCart:
      return initialState;

    default:
      return state;
  }
}

推荐阅读