如何在減速器中切換屬性？

我建立了一個購物車的應用程序與此減速機在reactjs /終極版：如何在減速器中切換屬性？

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屬性？

來源

2016-11-19 bier hier

終極版假定你永遠不發生變異的減速它給你的對象。 每一次，您都必須返回新的狀態對象。即使您沒有使用類似Immutable的庫，您也需要完全避免突變。

case 'TOGGLE_CART': 
    return !state.cartOpen;

做^^這是您的突變狀態（破壞你的狀態對象）。如果您不能保證不變性，Redux將失去其可預測性和效率。

要實現不可變狀態，我們可以使用vanilla Object.assign或更優雅的替代品object spread syntax。

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

來源

2016-11-20 05:26:18

我真的不改變狀態我只是返回一個布爾值？ –

我不小心按了輸入鍵，好的，這裏是我以前評論的其餘部分： 'initialState = {a：1，b：2，cartOpen：false}' 現在如果你的reducer返回'return！state.cartOpen'，那麼console .log（state）會產生一個布爾值「true」（但你想要'{a：1，b：2，cartOpen：true}'）。這意味着你的狀態對象中已經失去了所有其他屬性'a'，'b'等。基本上你已經改變或破壞了你的狀態。 –

您的減速器必須始終返回其負責的應用程序狀態的完整切片。對於TOGGLE_CART，您只返回openCart的布爾值。

相反，創建以前的狀態對象的副本，並只更新單個屬性要更改：

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

來源

2016-11-20 00:10:01 Timo

真棒感謝兄弟 –

如何在減速器中切換屬性？

回答

相關問題