Wie kann ich die Eigenschaft in Reducer umschalten?

Question

ich einen Wagen App mit diesen Minderer in reactjs gebaut haben/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; 

Ich versuche, den Staat für den Wagen also offen zu setzen, aber wenn ich die Protokolle der Wagen Eigenschaft überprüfen aktualisiert und nicht die cartOpen Eigentum?

Answer 1

Redux geht davon aus, dass Sie nie die Objekte mutieren es im Minderer gibt Ihnen . Jedes Mal müssen Sie das neue Statusobjekt zurückgeben. Auch wenn Sie keine Bibliothek wie Immutable verwenden, müssen Sie vollständig Mutation vermeiden.

case 'TOGGLE_CART': 
    return !state.cartOpen; 

tun ^^ dies Ihr Zustand mutiert (korrumpieren Ihre Statusobjekt). Wenn Sie keine Unveränderbarkeit garantieren, verliert Redux seine Vorhersagbarkeit und Effizienz.

Um unveränderlichen Zustand zu erreichen, können wir Vanille Object.assign oder seine elegantere Alternative object spread syntax verwenden.

Answer 2

Ihr Reduzierer muss immer das komplette Stück des App-Status zurückgeben, für den er verantwortlich ist. Für TOGGLE_CART geben Sie nur den booleschen Wert für openCart zurück.

stattdessen eine Kopie des vorherigen Status-Objekt erstellen und nur die einzelne Eigenschaft aktualisieren Sie ändern möchten:

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