रेडक्स में स्लाइस जोड़ना

हमने अपने रेडक्स एप्लिकेशन को बनाने के लिए मुख्य उपकरण तैयार कर लिए हैं, अब हम सीधे तौर पर इसके घटकों के कार्यान्वयन पर आगे बढ़ सकते हैं।

इस पाठ में हम स्लाइस (slices) की अवधारणा से शुरुआत करेंगे। रेडक्स एप्लिकेशन का एक वैश्विक स्टेट होता है जो स्टोर में संग्रहीत होता है। यह स्टेट स्लाइस में विभाजित होता है। वास्तव में, स्लाइस स्टोर का एक टुकड़ा है, जिसमें एप्लिकेशन के एक विशिष्ट भाग के लिए मूल स्टेट, रिड्यूसर और एक्शन की लॉजिक शामिल होती है।

हमारे एप्लिकेशन में उत्पाद शामिल होंगे, तदनुसार, पहला स्लाइस जो हम बनाएंगे, उसमें उत्पादों की जानकारी शामिल होगी। साथ ही, स्लाइस बनाते समय रिड्यूसर को जोड़ना आवश्यक है, जो यह जानता हो कि इस जानकारी को प्रोसेस कैसे करना है।

आइए src फोल्डर में जाएं और एक फोल्डर parts बनाएं, और फिर उसमें एक फोल्डर products बनाएं - यहां हम उत्पादों से संबंधित कोड वाली सभी फाइलें रखेंगे। products फोल्डर में हम एक फाइल productsSlice.js बनाएंगे, और फिर इसमें आरटीके से createSlice फंक्शन इम्पोर्ट करेंगे, जिसकी मदद से हम स्लाइस बनाएंगे:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

अब आइए उत्पादों के लिए एक स्लाइस बनाएं और इसे 'products' नाम दें। reducers प्रॉपर्टी के लिए हम अभी के लिए खाली कर्ली ब्रेसिज़ छोड़ देंगे:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

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

parts/products/productsSlice.jsconst initialState = [
  {
    id: '1',
    title: 'Product1',
    desc: 'This is an amazing product',
    price: '300',
    amount: '30',
  },
  {
    id: '2',
    title: 'Product2',
    desc: 'This is a nice product',
    price: '700',
    amount: '12',
  },
]

फाइल के कोड के अंत में, createSlice फंक्शन के आउटपुट से हम उसके द्वारा जनरेट किए गए reducer को लेंगे और उसे एक्सपोर्ट करेंगे। यह हमारे काम आएगा एप्लिकेशन की अन्य फाइलों में:

parts/products/productsSlice.jsexport default productsSlice.reducer