Redux'те action объекти үчүн маалыматтарды даярдоо

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

Келгиле, өнүмдөр менен болгон тиркемебизди ачып, андагы NewProductForm.jsx файлын ачалы. Төмөнкү код сабына көңүл буралы:

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

Бул жерде биз payload объектин түздөн-түз React компоненттинде чогултуп, аны productAdded экшеннерине өткөрүп жатабыз. Эгерде биз ушундай экшенди бир нече компоненттен жиберүүгө туура келсе же даярдоо логикасы татаал болуп чыкса эмне болот? Идея боюнча, биздин компонентибизге бул action үчүн payload ичиндеги объект кандай көрүнгөнү маанилүү эмес. Ошондой эле коддун туруктуу кайталанышы бизге ылайыктуу эмес.

Бул көйгөйлөрдү бизге дагы бир жолу белгилүү createSlice чече алат, себеби редукторду жазганда ал бизге ар кандай логиканы жазууга, тобокел сандарды генерациялоого жана башкаларга мүмкүндүк берген prepare callback-функциясын колдонууга мүмкүндүк берет. Мындай учурда редуктор талаасынын мааниси төмөнкүдөй объект түрүндө көрсөтүлүшү мүмкүн:

{reducer, prepare}

Келгиле, биздин productsSlice.js файлыбызды ачып, productAdded редуктору үчүн кодду өзгөртөлү. Азыр бул код бөлүгү:

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

Биз аны төмөнкүгө алмаштырабыз, мында reducer функциясы store'dогу абалды жаңыртуу менен алек болот, ал эми prepare - идентификатор генерацияланган жана биздин башка маалыматтарыбыз менен 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 файлына киргизиңиз. Тиркемеңизди иштетип, мурункудай иштегенине ишен.