रेडक्स एप्लिकेशन में रिड्यूसर जोड़ना

पिछले पाठ में हमने एक कंपोनेंट UserReaction बनाया था ताकि प्रत्येक उत्पाद के लिए उपयोगकर्ता प्रतिक्रियाएं भी हों। अब हमें एक रिड्यूसर लिखने की आवश्यकता है, जो उपयोगकर्ता द्वारा किसी प्रतिक्रिया के बटन पर क्लिक करने पर प्रतिक्रिया काउंटर को संसाधित करेगा।

आइए हमारे उत्पादों वाला एप्लिकेशन खोलें, और उसमें productsSlice.js फ़ाइल खोलें जिसमें सभी रिड्यूसर हैं। अब reducers प्रॉपर्टी में एक और रिड्यूसर reactionClicked बनाएंगे (हम इसे productAdded से पहले - पहले रख सकते हैं, हालांकि इससे कोई फर्क नहीं पड़ता)। हमेशा की तरह, इसे पैरामीटर के रूप में state और action पास करेंगे:

products/productsSlice.jsreactionClicked(state, action) {},

और अब उन घुंघराले ब्रेसिज़ के अंदर, जिन्हें हमने पिछले चरण में खाली छोड़ दिया था, इसके लिए कोड लिखेंगे। सबसे पहले हम action ऑब्जेक्ट के payload से उत्पाद आईडी और प्रतिक्रिया का नाम निकालेंगे:

products/productsSlice.jsconst { productId, reaction } = action.payload

फिर पास की गई स्टेट से आवश्यक उत्पाद प्राप्त करेंगे:

products/productsSlice.jsconst currentProduct = state.find(product => product.id === productId)

और यदि ऐसा उत्पाद मौजूद है, तो पास की गई प्रतिक्रिया का मान 1 से बढ़ा देंगे:

products/productsSlice.jsif (currentProduct) {
  currentProduct.reactions[reaction]++
}

बस, हमारा reactionClicked के लिए कोड तैयार है:

products/productsSlice.jsreactionClicked(state, action) {
  const { productId, reaction } = action.payload
  const currentProduct = state.find(product => product.id === productId)
  if (currentProduct) {
    currentProduct.reactions[reaction]++
  }
},

आइए फ़ाइल के अंत में प्राप्त action creator का एक्सपोर्ट जोड़ें:

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

यहां दो महत्वपूर्ण बिंदु ध्यान देने योग्य हैं। जैसा कि आपको पिछले पाठों से याद होगा - रिड्यूसर के कोड में सीधे इस तरह से मान अपडेट करना मना है (इस लाइन को देखें: reactions[reaction]++), लेकिन हमारे लिए यह चल जाएगा, क्योंकि हम इसे createSlice के अंदर कर रहे हैं, जो Immer लाइब्रेरी का उपयोग करता है। यह सुनिश्चित करेगी कि हमारा कोड मान को "सुरक्षित" रूप से अपडेट करने के लिए परिवर्तित हो जाए। यह हमें जटिल चीजों को अधिक सरल तरीके से लिखने की अनुमति देता है।

अगली बात जो याद रखनी चाहिए - action ऑब्जेक्ट में न्यूनतम संभव जानकारी होनी चाहिए - केवल इतनी कि यह बताया जा सके कि क्या हुआ है। इसमें कोई भी गणना करना उचित नहीं है। स्टेट को अपडेट करने के लिए सभी गणनाएं रिड्यूसर में की जानी चाहिए, यहां इसके लिए जितनी भी लॉजिक लिखनी हो, लिख सकते हैं।