Redux store में उत्पाद डेटा को अपडेट करना

हमने उत्पादों को जोड़ना सीख लिया है, लेकिन क्या होगा अगर हम उत्पाद की जानकारी को बदलना चाहते हैं? आइए इस और आने वाले पाठों में देखें कि यह कैसे किया जाए।

आइए हमारे उत्पाद ऐप्लिकेशन को खोलें और productsSlice.js फ़ाइल में जाएं। आइए शुरू करें इससे कि हमें products स्लाइस के लिए एक और रिड्यूसर लिखने की आवश्यकता है, जो उत्पाद को अपडेट करते समय चलेगा। इसे productUpdated नाम दें और फ़ील्ड reducers में productAdded रिड्यूसर के बाद जोड़ें। साथ ही इसे तुरंत पैरामीटर state और action पास करें, जिन पर, जैसा कि हमें याद है, रिड्यूसर काम करता है:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

आइए अब सोचते हैं कि उत्पाद को अपडेट करने के लिए हमें किस डेटा की आवश्यकता होगी। सबसे पहले - यह id है, इसके द्वारा हम store में हमारे इच्छित उत्पाद को ढूंढ पाएंगे। बाकी डेटा - नाम, विवरण, कीमत और मात्रा बदलने के लिए हमारे पास होगी। ये सभी मान हमें action ऑब्जेक्ट के payload प्रॉपर्टी से मिलेंगे, जो हमारे पास आएगा, और, अगर हम इसे हाथ से लिख रहे होते, तो यह नीचे दिखाए गए अनुसार दिखता। ध्यान दें कि अपेक्षित मान प्रॉपर्टी payload का - एक आर्गुमेंट है, इसलिए हम यहाँ एक ऑब्जेक्ट पास करेंगे (इस पर हम आगे चर्चा करेंगे):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

मुख्य बिंदुओं को समझने के बाद, अब हम productUpdated के लिए कोड लिख सकते हैं। सबसे पहले action ऑब्जेक्ट से बदला हुआ डेटा प्राप्त करेंगे:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

अब हम प्राप्त id के आधार पर उस उत्पाद को ढूंढेंगे, जिसे बदलने की आवश्यकता है:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

यदि ऐसा उत्पाद store में मिल गया, तो हम उसके डेटा को नए मानों से बदल देंगे:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

हमें केवल एक्शन क्रिएटर को निर्यात करना बचा है ताकि कंपोनेंट में उपयोग किया जा सके, जिसे createSlice हमारे लिए बनाएगा। आइए इसे फ़ाइल के अंत में मौजूद productAdded के साथ निर्यात में जोड़ दें:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions