Reduxда action объекти учун маълумотларни тайёрлаш

Якинда биз сиз билан createSlice функцияси action.payload яратишда битта аргумент кутгани ҳақида гапирдик. Бир томондан, бу унинг ишлатишини осонлаштирса, иккинчи томондан action объектининг мундарижасини тайёрлаш учун қўшимча ҳаракатларни талаб қилиши мумкин.

Келгинг, маҳсулотлар дўрисидаги илованимизни очиб, ундаги NewProductForm.jsx файлини кетайлик. Куйидаги код сатрига эътибо беринг:

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

Биз payload объектини айнан React компонентида ясаймиз ва уни productAdded 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 ни компонентда эмас, бу ерда яратаётганимиз sababil, келгинг nanoid ни импортга қўшайлик:

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

Ниҳоят, NewProductForm.jsx файлида ўзгартиришлар кирамиз. Бу сатр ўрнига:

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

Бизда шундай сатр бўлади, бунда биз жуда оддий ҳолда kerakli маълумотларимизни vergul orqali ўтказамиз (бу файлда nanoid ни импортдан олиб tashlashni унутмангиз):

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

Иловани ишга тушириб, янги маҳсулот яратиб, бирон нарсани бузмаганимизга ишонч ҳосил қилайлик.

Талабалар ҳақидаги иловангизни очинг. StudentsSlice.js файлида studentAdded редьюсерингизни дарсда кўрсатилганидек {reducer, prepare} объекти кўринишида қайта ёзинг.

NewStudentForm.jsx файлида дарсда кўрсатилганидек мос ўзгартиришлар киритинг. Иловани ишга тушириб, ҳамма нарс аввалгидек ишлашига ишонч ҳосил қилинг.