javascript - Angular/Redux 保持状态的正确方法

Question

我正在使用 Angular + Redux 构建一个购物车应用。我有一组对象(购物车中的产品)，每个接口(interface):

export interface IProduct {
    id: number;
    description: string;
    isAdded: boolean;
}

页面中的产品有一个按钮添加到购物车

<div class="addBtn" (click)="addToCart(prod)">
    <span class="unaddedItem" *ngIf="!prod.isAdded; else added">Add to cart</span>
    <ng-template>
        <span class="addedItem" #added>In cart</span>
    </ng-template>
</div>

我想要的是在添加产品时将 Add to cart 文本更改为 In cart 。我用 Rxjs 成功地做到了，但是当我离开 Products 页面然后返回它时，我的 In cart 跨度为添加产品丢失(添加到购物车 再次显示)。所以，我认为 Redux 是帮助我保持状态的唯一方法。

我写了一个带有一些 Action 的 reducer 函数。这是其中之一:

export function rootReducer(state, action){
    switch(action.type){
        case ADD_PRODUCT:
            action.product.id = state.products.length + 1;
            return Object.assign({}, state, {
                products: state.products.concat(Object.assign({}, action.product))
            })
    }
}

那么，我的问题是将对象添加到购物车后保持对象状态的正确方法是什么？我应该为此使用相同的 ADD_PRODUCT 操作，还是应该编写另一个操作，例如 MARK_ADDED 并将其用于另一个添加的对象数组？因此，In cart 产品和 Marked added 产品有两个不同的数组，我将在其中相应地保存添加的对象及其状态？

Answer 1

首先，我不会将该逻辑添加到您的 rootReducer。 Remember, your reducers mimic the shape of your data .状态应该从您的 rootReducer 流向各个状态片。在下面的示例中，理想情况下您需要一个返回整个状态的 rootReducer。返回 by_id 和 all_ids 等的产品和购物车 reducer ，直到构建整个数据结构。

对于您的购物车和产品，我更倾向于采用以下方式:

{
  products: {
    by_id: {
      1: {
        id: 1,
        name: "hairdryer",
        price: "2.99",
        in_cart: true
      },
      2: {
        id: 2,
        name: "brush",
        price: "299.99",
        in_cart: false
      }
    },
    all_ids: [1, 2]
  },
  cart: {
    products_added: [1],
    saved: false,
    some_data: "foo"
  }
} 

这遵循文档示例中列出的结构。当 add_to_cart Action 被调度时，它的对象通过每个 reducer 向下传递，产品将看到此数据以及购物车。如文档中所示，我只在产品的 in_cart reducer 和购物车的 products_added reducer 中使用 switch 语句。

---

另外，在 reducer 中添加 UUID 分配也是一种不好的做法。 reducer 的工作是简单地定义状态如何变化，而不是定义状态是什么。在您的操作或中间件中执行此操作。

---

我也倾向于通过您的状态传递整个 Action ，而不是只传递一个键。这样，如果您需要在您的状态下进一步执行操作的另一部分，则无需重构。