मैं reducer में संपत्ति कैसे टॉगल कर सकता हूं?

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; 

कर ^^ यह आपके राज्य (अपने राज्य वस्तु भ्रष्ट) परिवर्तनशील है। जब आप अपरिवर्तनीयता की गारंटी नहीं देते हैं, तो रेडक्स इसकी भविष्यवाणी और दक्षता खो देता है।

अपरिवर्तनीय स्थिति प्राप्त करने के लिए, हम वेनिला 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 
    });