Redux-те action объектісі үшін деректерді дайындау

Жақында біз сізбен createSlice функциясының action.payload құру кезінде бір аргумент күтетіні туралы әңгімелестік. Бір жағынан бұл оның қолданылуын жеңілдетсе, екінші жағынан action объектісінің мазмұнын дайындау үшін қосымша әрекеттерді талап етуі мүмкін.

Өнімдер қолданбамызды ашып, ондағы NewProductForm.jsx файлын ашайық. Мына код жолына назар аударыңыз:

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

Мұнда біз payload объектісін тура React компонентінде жинап, оны productAdded action-іне береміз. Ал егер бізге осындай action-ді бірнеше компоненттен жіберу керек болса немесе жинау логикасы күрделі болып шықса? Идея бойынша біздің компонентке осы action үшін payload-тегі объект қалай көрінетіні маңызды емес. Сонымен қатар бізді кодтың тұрақты қайталануы қанағаттандырмайды.

Бұл мәселелерді бізге тағы да атақты createSlice шешуге көмектесе алады, себебі редьюсерді жазу кезінде ол бізге әртүрлі логиканы жазуға, кездейсоқ сандарды генерациялауға және т.б. мүмкіндік беретін prepare callback-функциясын қолдануға мүмкіндік береді. Осындай жағдайда редьюсер өрісінің мәні мынадай объект түрінде ұсынылуы мүмкін:

{reducer, prepare}

productsSlice.js файлымызды ашып, productAdded редьюсерінің кодын өзгертейік. Енді бұл код фрагменті:

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

Біз оны мынаған өзгертеміз, онда reducer функциясы store-дегі стейтті жаңартумен айналысады, ал prepare - генерацияланған id және басқа деректеріміз бар payload объектісін қайтарады:

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

Енді біз id-ді компонентте емес, осында генерациялайтындықтан, nanoid-ті импортқа қосамыз:

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

Соңында NewProductForm.jsx файлында өзгерістер енгіземіз. Мына жолдың орнына:

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

Бізде қажетті деректерді жай ғана үтір арқылы беретін мынадай жол болады (осы файлда nanoid-ті импорттан алып тастауды ұмытпаңыз):

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

Қолданбаны іске қосып, содан кейін жаңа өнімді жасап, біз ештеңені бұзбағанымызға көз жеткізейік.

Студенттер қолданбаңызды ашыңыз. StudentsSlice.js файлында studentAdded редьюсеріңізді сабақта көрсетілгендей {reducer, prepare} объектісі түрінде болуы үшін қайта жазыңыз.

NewStudentForm.jsx файлына сабақта көрсетілгендей сәйкес өзгерістер енгізіңіз. Қолданбаны іске қосып, бәрі бұрынғыдай жұмыс істейтініне көз жеткізіңіз.