reduxストアを設計するときは、ストア状態に情報が重複してはいけません。正規化の概念に準拠する必要があります。 実際、totalPrice
、totalItems
のような情報は、残りの状態から確実に結論づけることができます。
この合計は、mapStateToProps
内で締結/計算することができます。還元剤もミドルウェアもありません。
これがクリアされている場合は、次の2つの減速があります:
製品のデータベースとして、第1減速機:ID +名+価格+を....
第二減速機を約Cart
ですショッピングアイテムの集合である:
{
products : {
'product_1xxx' : {
id: product_1xxx,
price :150,
name: 'T-Shirt'
} ,
'product_2yyy' : {
id: product_2yyy,
price : 35,
name: 'Glass'
}
},
//---second reducer--//
cartItems: {
[
{
'productId': 'product_2yyy',
quantity: 3
}
]
}
:ID +数量 Iは、以下の状態の形状を提案することができます
}
上記の例では、あなたが2つの製品を持っていることを意味し、ユーザは、3品目の数量と第2の製品を選択します。ユーザーが追加したときに
、その後、アクションaddToCartが{type, productId, quantity}
の形になりますので、/アイテムを削除し、アクションが唯一の第二レデューサー(あなたがcombineReducers
を使用していると仮定)によって処理されなければなりません。
また、(合計のレンダリングの責任)コンポーネントは、以下のmapStateToProps
を持っている必要があります。
function mapStateToProps({products, cartItems }) {
return {
totalPrice: cartItems.map(({productId, quantity}) => ({quantity, price: products[productId].price }))
.reduce((total, item) => total + (item.price * item.quantity) , 0);
}
}
あなたが注意しているように、price
情報は冗長ではありませんが、それはPRODUCTIDによる接合することにより、第1減速から結論されました。