Reduxda action ob'ekti uchun ma'lumotlarni tayyorlash

Yaqinda biz siz bilan createSlice funktsiyasi action.payload yaratishda bitta argument kutishini muhokama qildik. Bir tomondan, bu uning foydalanishini soddalashtirsa, ikkinchi tomondan esa action ob'ekti tarkibini tayyorlash uchun qo'shimcha harakatlar talab qilishi mumkin.

Keling, mahsulotlar ilovamizni ochaylik, uning ichidagi NewProductForm.jsx faylini ochaylik. Quyidagi kod qatoriga e'tibor bering:

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

Bu yerda biz payload ob'ektini to'g'ridan-to'g'ri React komponentida yig'amiz va uni productAdded actioniga o'tkazamiz. Agar biz bir xil actionni bir nechta komponentlardan yuborishimiz kerak bo'lsa yoki yig'ish logikasi murakkab bo'lib qolsa-chi? Ideally, bizning komponentimiz ushbu action uchun payload dagi ob'ekt qanday ko'rinishiga alohida e'tibor bermasligi kerak. Bundan tashqari, biz doimiy kod takrorlanishidan norozi.

Bu muammolarni yana hal qilishga bizga yana mashhur createSlice yordam berishi mumkin, chunki reducer yozishda u bizga turli xil mantiq yozish mumkin bo'lgan prepare callback-funktsiyasidan foydalanishga imkon beradi, tasodifiy raqamlar generatsiya qilish va boshqalar. Bunday holda reducer maydoni qiymati quyidagi ob'ekt ko'rinishida taqdim etilishi mumkin:

{reducer, prepare}

Keling, productsSlice.js faylimizni ochaylik va productAdded reduceri uchun kodni o'zgartiraylik. Endi bu kod parchasi:

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

Biz uni quyidagiga o'zgartiramiz, unda reducer funktsiyasi storedagi stateni yangilash bilan shug'ullansin, prepare esa - generatsiya qilingan id va boshqa ma'lumotlarimiz bilan payload ob'ektini qaytarsin:

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

Endi biz id ni komponentda emas, buni yerda generatsiya qilamiz, shuning uchun keling, importga nanoid ni qo'shamiz:

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

Oxir oqibat, o'zgartirishlarni NewProductForm.jsx ga kiritamiz. Bu qator o'rniga:

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

Bizda shunday bo'ladi, unda biz shunchaki kerakli ma'lumotlarni vergul orqali o'tkazamiz (ushbu faylda importdan nanoid ni olib tashlashni unutmang):

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

Ilovani ishga tushiramiz, keyin yangi mahsulot yaratamiz va hech narsani buzganimizga ishonch hosil qilamiz.

Talabalar ilovangizni oching. StudentsSlice.js faylida studentAdded reduceringizni qayta yozing, u {reducer, prepare} ob'ekti ko'rinishida bo'lsin, darsda ko'rsatilgandek.

NewStudentForm.jsx faylida tegishli o'zgartirishlarni kiriting, darsda ko'rsatilgandek. Ilovani ishga tushiring va hammasi avvalgidek ishlashiga ishonch hosil qiling.