Mülk redüktörde nasıl geçiş yapabilirim?

Question

Ben reactjs bu redüktörlü sepeti uygulaması oluşturduk/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; 

ben yani açık arabası için durumu belirtmek için çalışıyorum ama günlükleri kontrol ederken sepeti özelliği cartOpen güncellenerek değil mülkiyet?

Answer 1

Redux Eğer indirgeyicide size verir nesneleri mutasyona asla varsayar: Değiştirmek istediğiniz tek bir özellik

Bunun yerine, önceki devlet nesnenin bir kopyasını oluşturmak ve sadece güncellemek . Her zaman, yeni durum nesnesini döndürmeniz gerekir. Immutable gibi bir kütüphane kullanmıyor olsanız bile, mutasyondan kaçınmak için tamamen 'a ihtiyacınız vardır.

case 'TOGGLE_CART': 
    return !state.cartOpen; 

bu (sizin devlet nesnesi bozulmasını) senin durumunu mutasyona edilir ^^ yapmak. Değişmezliği garanti etmediğinizde, Redux öngörülebilirliğini ve verimliliğini kaybeder.

Değiştirilebilir durumu elde etmek için vanilla Object.assign veya daha şık bir alternatif olan object spread syntax'u kullanabiliriz.

Answer 2

Redüktörünüz her zaman, sorumlu olduğu uygulamanın durumunun tam dilimini döndürmelidir. TOGGLE_CART için, yalnızca openCart için boolean değerini döndürüyorsunuz.

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