レデューサーの全商品の合計価格を計算するには？

Question

私はreactjs/Reduxのでショッピングカートアプリを構築しようとしていますと、これは私の減速の1です：

const initialState = { 
    items: [], 
    cartOpen:true 
} 

    const Cart = (state = initialState, action) => { 
     switch (action.type) { 
      case 'ADD_TO_CART': 
       return [...state, action.payload] 
      default: 
       return state 
     } 
    } 

    export default Cart; 

他の減速は、データがアプリのための項目、すなわち含まれています

const Data = (state = initialState, action) => { 
    switch (action.type) { 
     case 'GET_DATA_SUCCESS': 
      return Object.assign({}, state, { datas: action.data }); 
     case 'GET_DATA_FAIL': 
      return Object.assign({}, state, { datas: action.data }); 

     default: 
      return state 
    } 
} 

ADD_TO_CARTアクションがディスパッチされましたカートの新しい合計を計算します。私は、カートが更新されたときにカート内のアイテムの合計価格を計算する方法を探しています。

Answer 1

あなたはこのような何かを行うことができます。

const initialState = { 
    items: [], 
    cartOpen:true, 
    total:0, 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      let newstate = [...state, action.payload]; 
      let newTotal = 0; 
      newstate.items.forEach(item=>{ 
       newTotal+=item.price; 
      }); 
      newstate.total =newTotal; 
      return newstate ; 
     default: 
      return state 
    } 
} 

export default Cart; 

Answer 2

変更する項目を起こすアクションはGET_DATA_SUCCESSあるなら、あなたは同じ減速に合計金額を計算することができ、それに応じて新しい状態プロパティを設定するので、何かのように：

case 'GET_DATA_SUCCESS': 
    let totalPrice = getTotalPrice(action.data); 
    return Object.assign({}, state, { datas: action.data, cartTotal: totalPrice }); 

（価格が可能であればあなたが価格を再計算して両方のケース節に設定する必要がある検索失敗のために変更してください。）

この句で状態の2つの部分を設定しない場合は、2つの縮小両方ともGET_DATA_SUCCESSに作用しますが、状態の別々の部分を設定します（の場合は1つ）。、カートトータル）。

完全な代替として、状態を正規化しておくことを念頭に置いてください。 はとすることができます。アイテムを状態のままにして、他の場所でヘルパー関数を使用してレンダリング時の合計価格を計算します。項目の数が比較的少なく、計算が簡単な場合、これは検討する価値があります。これは読んでも価値がある：

http://redux.js.org/docs/recipes/ComputingDerivedData.html