Redux-də slice əlavə etmək

Biz Redux proqramımızı yaratmaq üçün əsas alətləri hazırladıq, indi birbaşa onun komponentlərinin həyata keçirilməsinə keçə bilərik.

Bu dərsdə biz slice-lar (slices) anlayışı ilə başlayacayıq. Redux proqramı store-da saxlanılan bir qlobal state-ə malikdir. Bu state slice-lara bölünür. Əslində, slice, tətbiqin müəyyən bir hissəsi üçün ilkin state-i, reducer və action məntiqini ehtiva edən anbarın kiçik bir hissəsidir.

Bizim proqramımızda məhsullar iştirak edəcək, buna görə də bizim edəcəyimiz ilk slice məhsullar haqqında məlumat ehtiva edəcək. Həmçinin slice yaradarkən bu məlumatı necə emal edəcəyini bilən reduceri əlavə etmək lazımdır.

Gəlin src qovluğuna daxil olaq və parts qovluğu yaradaq, sonra isə onun içində products qovluğu yaradaq - buraya məhsullarla əlaqəli bütün kod fayllarını qoyacayıq. products qovluğunda biz productsSlice.js faylını yaradacayıq, sonra isə ona RTK-dan slice-ları yaratmaq üçün istifadə edəcəyimiz createSlice funksiyasını import edəcəyik:

import { createSlice } from '@reduxjs/toolkit'

İndi gəlin məhsullar üçün bir slice yaradaq və onu 'products' adlandıraq. reducers xassəsi üçün biz hələlik boş qıvrım mötərizələr buraxacayıq:

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

Həmçinin bizə initialState - state slice-nın ilkin vəziyyətini, yəni proqram ilk dəfə işə salındıqda yüklənəcək vəziyyəti təyin etmək lazımdır. Onu import-dan dərhal sonra və slice yaratmadan əvvəl yazaq. Gəlin bu, hər birində məhsul məlumatları olan bir neçə obyektdən ibarət massiv olsun. Hər bir məhsul üçün id, ad, təsvir, qiymət və miqdarı göstərək:

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',
	},
]

Fayl kodunun sonunda biz createSlice funksiyasının işi nəticəsində yaranan reduceri götürüb onu export edəcəyik. O, proqramın digər fayllarında bizə lazım olacaq:

export default productsSlice.reducer

Tələbələr üçün olan proqramınızı açın. Orada dərsdə təsvir olunduğu kimi studentsSlice.js faylını yaradın. Orada createSlice köməyi ilə students slice-nı yaradın. Slice-nın ilkin dəyəri kimi hər birində tələbə məlumatları olan bir neçə obyektdən ibarət massiv olsun.

Hər bir tələbə üçün sahələr edin: id, ad, soyad, yaş və ixtisas.

studentsSlice.js faylının sonunda alinmiş reduceri dərsdə təsvir olunduğu kimi export edin.