還元剤のプロパティを切り替えるにはどうすればよいですか？

Question

私はreactjs/Reduxの中で、この減速とカートのアプリを構築しています：

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

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

     case 'TOGGLE_CART': 
      debugger; 
      return !state.cartOpen; 

     default: 
      return state 
    } 
} 

export default Cart; 

私はつまり、オープンが、私は、ログをチェックしたときに、カートプロパティがcartOpen更新されず、カートの状態を設定しようとしていますプロパティ？

Answer 1

Reduxのは、あなたがそれを 減速であなたに与えたオブジェクトを変異させたことがないことを前提としてい。 毎回、新しい状態オブジェクトを返す必要があります。 Immutableのようなライブラリを使用しない場合でも、完全に の変異を避ける必要があります。

case 'TOGGLE_CART': 
    return !state.cartOpen; 

これは（あなたの状態オブジェクトを破壊する）あなたの状態を変異さ^^行います。不変性を保証しない場合、Reduxは予測可能性と効率性を失います。

不変状態を達成するには、バニラObject.assignまたはよりエレガントな代替object spread syntaxを使用できます。

case 'TOGGLE_CART': 
    return { 
     ...state, 
     cartOpen: !state.cartOpen 
    } 

Answer 2

あなたのレデューサーは、責任を負うアプリケーションの状態の完全なスライスを常に返す必要があります。 TOGGLE_CARTの場合は、openCartのブール値のみを返します。代わりに

、以前の状態オブジェクトのコピーを作成し、のみ変更する単一のプロパティを更新します。

case 'TOGGLE_CART': 
    return Object.assign({}, state, { 
     cartOpen: !state.cartOpen 
    });