状態を維持する角度/ Redux正しい方法

Question

のショッピングカートアプリを構築しています。角度+ Redux。 私はインターフェイスの各オブジェクトの配列（製品私のカートでを）持っている：製品ボタンカートに

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

を追加しているページに

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

私が欲しいものは変更するカートに入れるテキストで商品を追加すると、商品が追加されます。私はRxjsで正常にそれをやったが、私は製品ページを離れた後、それに戻って行くときに、追加の製品のための私のカートでスパンが失われる（カートに追加再び示されています）。だから、私はReduxは私が状態を維持するための唯一の方法だと思います。

私はいくつかのアクションでレデューサー機能を書きました。ここではそのうちの一つだ：

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を追加して追加オブジェクトの別の配列に使用する必要がありますか？したがって、の2つの異なるアレイを有するカート製品およびマーク付き商品が追加されました。追加されたオブジェクトとその状態を保存しますか？

Answer 1

最初に、論理をあなたのrootReducerに追加しません。 Remember, your reducers mimic the shape of your data。状態はあなたのrootReducerから状態の個々のスライスに流れなければなりません。下の例では、あなたの全体の状態を返すrootReducerが理想的です。あなたの全体のデータ構造が構築されるまでby_idとall_idsなどを返す商品とカートレデューサー。これは、ドキュメントの例にレイアウト構造を次の

{ 
    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" 
    } 
} 

：

あなたのカートと製品の

、私はこれらの線に沿って何かを持っているために、より傾斜になるだろう。アクションがディスパッチされると、そのオブジェクトは各レデューサーを通過し、製品はこのデータとカートを表示します。ドキュメントに示されているように、私はちょうどあなたのin_cart製品の減速機とproducts_added減速機のswitch文を使用しています。

---

あなたのUUID割り当てをレデューサーに追加することも悪い習慣です。レデューサーの仕事は、状態がどのように変化するかを単純に定義し、その状態が何であるかを定義することではありません。あなたの行動やミドルウェアでそれを行います。

---

私はまた、1つのキーとは対照的に、あなたの状態全体を渡す傾向があります。そうすれば、あなたの行動の別の部分があなたの状態にさらに必要な場合、あなたはリファクタリングする必要はありません。