Redux-də action obyekti üçün məlumatların hazırlanması

Bu yaxınlarda biz sizinlə createSlice funksiyasının action.payload yaratmaq üçün bir arqument gözlədiyi barədə danışmışdıq. Bu, bir tərəfdən onun istifadəsini asanlaşdırır, digər tərəfdən isə action obyektinin məzmununu hazırlamaq üçün əlavə hərəkətlər tələb edə bilər.

Gəlin məhsullar tətbiqimizi, onun içində isə NewProductForm.jsx faylını açaq. Aşağıdakı kod sətrinə diqqət yetirin:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Burada biz payload obyektini birbaşa React komponentində yığırıq və onu productAdded actionuna ötürürük. Bəs belə bir actionu bir neçə komponentdən göndərməli olsaq və ya yığma məntiqi mürəkkəb olsa? İdeya olaraq, bizim komponentimizə bu action üçün payload-dəki obyektin necə göründüyünün heç bir fərqi olmamalıdır. Üstəlik, biz kodun daimi təkrarı ilə razı deyilik.

Bu problemləri bizə yenidən məşhur createSlice imkanı həll edə bilər, çünki reducer yazarkən o, bizə müxtəlif məntiq yazmaq, təsadüfi ədədlər yaratmaq və s. edə biləcəyimiz prepare callback funksiyasından istifadə etməyə imkan verir. Belə bir halda, reducer sahəsi üçün dəyər aşağıdakı obyekt şəklində təqdim edilə bilər:

{reducer, prepare}

Gəlin productsSlice.js faylımızı açaq və productAdded reduceri üçün kodu dəyişək. İndi bu kod parçası:

productAdded(state, action) {
	state.push(action.payload)
},

Biz onu aşağıdakı ilə dəyişəcəyik, burada reducer funksiyası store-də state-i yeniləməklə, prepare isə yaradılmış id və digər məlumatlarımızla payload obyektini qaytarmaqla məşğul olacaq:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Artıq id-ni komponentdə yox, burada yaradacağımız üçün, gəlin nanoid-i importa əlavə edək:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Nəhayət, NewProductForm.jsx faylında dəyişikliklər edək. Bu sətrin yerinə:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Bizdə lazımi məlumatları sadəcə vergüllə ötürdüyümüz belə bir sətir olacaq (bu faylda nanoid-i importdan çıxartmağı unutmayın):

dispatch(productAdded(name, desc, price, amount))

Tətbiqi işə salaq, sonra yeni məhsul yaradaq və heç nəsi sındırmadığımıza əmin olaq.

Tələbələr tətbiqinizi açın. StudentsSlice.js faylında studentAdded reducerinizi dərsdə göstərildiyi kimi {reducer, prepare} obyekti şəklində yenidən yazın.

NewStudentForm.jsx faylında dərsdə göstərildiyi kimi müvafiq dəyişikliklər edin. Tətbiqi işə salın və hər şeyin əvvəlki kimi işlədiyinə əmin olun.