Redux-ում սլայսի ավելացում

Մենք պատրաստել ենք հիմնական գործիքները մեր Redux հավելվածը ստեղծելու համար, այժմ կարող ենք անցնել ուղղակիորեն դրա բաղադրիչների իրականացմանը:

Այս զբաղմունքում մենք կսկսենք սլայսեր (slices) հասկացությունից: Redux հավելվածն ունի մեկ գլոբալ ստեյթ, որը պահվում է store-ում: Այս ստեյթը բաժանվում է սլայսերի: Փաստորեն, սլայսը պահեստի մի կտոր է, որը պարունակում է սկզբնական ստեյթը, reducer-ի և action-ների տրամաբանությունը հավելվածի որոշակի մասի համար:

Մեր հավելվածում կլինեն ապրանքներ, համապատասխանաբար առաջին սլայսը, որը մենք կստեղծենք, կպարունակի տեղեկատվություն ապրանքների մասին: Նաև սլայս ստեղծելիս անհրաժեշտ է ավելացնել reducer, որը գիտի, թե ինչպես մշակել այս տեղեկատվությունը:

Եկեք մտնենք src պանակը և ստեղծենք parts պանակը, ապա դրա մեջ պանակ products - այստեղ մենք կդնենք բոլոր ֆայլերը կոդով, որոնք վերաբերում են ապրանքներին: products պանակում մենք կստեղծենք ֆայլ productsSlice.js, ապա կներմուծենք դրա մեջ RTK-ից createSlice ֆունկցիան, որի օգնությամբ մենք կստեղծենք սլայսերը:

import { createSlice } from '@reduxjs/toolkit'

Այժմ եկեք ստեղծենք ապրանքների սլայսը և անվանենք այն 'products': reducers հատկության համար մենք առայժմ կթողնենք դատարկ գանգուր փակագծեր:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Նաև մեզ անհրաժեշտ է սահմանել initialState - սլայսի ստեյթի սկզբնական վիճակը, որը կբեռնվի հավելվածի առաջին գործարկման ժամանակ: Գրենք այն անմիջապես ներմուծումից հետո և սլայսի ստեղծումից առաջ: Թող դա լինի մի քանի օբյեկտներից բաղկացած զանգված, որոնք պարունակում են ապրանքների տվյալները: Յուրաքանչյուր ապրանքի համար նշենք id, անվանումը, նկարագրությունը, գինը և քանակը:

const 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-ը և կէքսպորտենք այն: Այն մեզ հարկավոր կլինի հավելվածի այլ ֆայլերում:

export default productsSlice.reducer

Բացեք ձեր ուսանողական հավելվածը: Ստեղծեք դրա մեջ studentsSlice.js ֆայլը, ինչպես նկարագրված է դասում: Ստեղծեք դրա մեջ createSlice-ի օգնությամբ students սլայսը: Որպես սլայսի սկզբնական արժեք թող ձեզ մոտ լինի մի քանի օբյեկտներից բաղկացած զանգված, որոնք պարունակում են ուսանողների տվյալները:

Յուրաքանչյուր ուսանողի համար ստեղծեք դաշտեր՝ id, անուն, ազգանուն, տարիք և մասնագիտություն:

studentsSlice.js ֆայլի վերջում էքսպորտեք ստացված reducer-ը, ինչպես նկարագրված է դասում: