Príprava dát pre objekt action v Reduxe

Nedávno sme hovorili o tom, že funkcia createSlice očakáva jeden argument pri vytváraní action.payload. Na jednej strane to zjednodušuje jej používanie, na druhej strane to môže vyžadovať dodatočné kroky na prípravu obsahu objektu action.

Otvorme našu aplikáciu s produktami a v nej súbor NewProductForm.jsx. Všimnite si nasledujúci riadok kódu:

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

Tu zhromažďujeme payload objekt priamo v React komponente a prenášame ho do akcie productAdded. A čo ak budeme musieť odoslať takúto akciu z niekoľkých komponentov alebo logika na zostavenie bude zložitá? V zásade by nášmu komponentu malo byť jedno, ako vyzerá objekt v payload pre danú akciu. Navyše nám nevyhovuje neustále duplikovanie kódu.

Tieto problémy nám opäť môže pomôcť vyriešiť náš slávny createSlice, pretože pri písaní redukčnej funkcie umožňuje použiť callback funkciu prepare, v ktorej môžeme písať rôznu logiku, generovať náhodné čísla a podobne. V takom prípade môže byť hodnota pre pole redukčnej funkcie reprezentovaná nasledujúcim objektom:

{reducer, prepare}

Otvorme náš súbor productsSlice.js a zmeňme kód pre redukčnú funkciu productAdded. Teraz tento kúsok kódu:

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

Zmeníme na nasledujúci, v ktorom funkcia reducer bude vykonávať aktualizáciu stavu v store, a prepare - bude vracať objekt payload so vygenerovaným id a našimi ďalšími dátami:

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

Keďže teraz budeme generovať id tu, a nie v komponente, pridajme nanoid do importu:

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

Nakoniec vykonajme zmeny v NewProductForm.jsx. Namiesto riadku:

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

Budeme mať taký, v ktorom jednoducho cez čiarku prenesieme potrebné dáta (nezabudnite v tomto súbore odstrániť nanoid z importu):

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

Spustíme aplikáciu, potom vytvoríme nový produkt a presvedčíme sa, že sme nič nepokazili.

Otvorte vašu aplikáciu so študentmi. V súbore StudentsSlice.js prepíšte vašu redukčnú funkciu studentAdded takým spôsobom, aby bola vo forme objektu {reducer, prepare}, ako je ukázané v lekcii.

Vykonajte zodpovedajúce zmeny v súbore NewStudentForm.jsx, ako je ukázané v lekcii. Spustite aplikáciu a presvedčte sa, že všetko funguje ako predtým.