2017-11-18 9 views
0

React nativeとReduxを使用してショッピングカートを構築しています。 store内のproducts配列を変更するaddToCartやremoveFromCartなどのアクションがいくつかあります。私は2つの質問があります:ReactネイティブReduxストアの変更を購読する

1)どのようにしてcartのtotalPriceのようなストアフィールドを更新できますか?店舗の変更を購読して項目を更新する必要がありますか? Reactネイティブのコンテキストとコールユーティリティ関数内のストアに一度はサブミットする必要があります

2)私のカートに入れる還元剤は以下の通りです。私はtotalPriceとtotalItemsの値を変更していますか?もしそうなら、どうすればtotalPriceとtotalItemsを変更せずに更新できますか?これは本当に混乱しています。

答えて

0

reduxストアを設計するときは、ストア状態に情報が重複してはいけません。正規化の概念に準拠する必要があります。 実際、totalPricetotalItemsのような情報は、残りの状態から確実に結論づけることができます。

この合計は、mapStateToProps内で締結/計算することができます。還元剤もミドルウェアもありません。

これがクリアされている場合は、次の2つの減速があります:

  1. 製品のデータベースとして、第1減速機:ID +名+価格+を....

  2. 第二減速機を約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減速から結論されました。

関連する問題