Příprava dat pro objekt action v Redux

Nedávno jsme mluvili o tom, že funkce createSlice očekává jeden argument při vytváření action.payload. Na jedné straně to zjednodušuje její použití, na druhé straně to může vyžadovat další kroky pro přípravu obsahu objektu action.

Pojďme otevřít naši aplikaci s produkty a v ní soubor NewProductForm.jsx. Všimněte si následujícího řádku kódu:

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

Zde sestavujeme payload objekt přímo v React komponentě a předáváme jej do akce productAdded. A co když budeme muset odeslat stejnou akci z několika komponent nebo bude logika pro sestavení složitá? V zásadě by naší komponentě mělo být jedno, jak vypadá objekt v payload pro danou akci. Navíc nás neuspokojuje neustálé duplikování kódu.

Tyto problémy nám opět může pomoci vyřešit náš slavný createSlice, protože při psaní reduktoru nám umožňuje používat callback funkci prepare, ve které můžeme psát různou logiku, generovat náhodná čísla a podobně. V takovém případě může být hodnota pro pole reduktoru reprezentována jako následující objekt:

{reducer, prepare}

Pojďme otevřít náš soubor productsSlice.js a změnit kód pro reduktor productAdded. Nyní tento kousek kódu:

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

Změníme na následující, ve kterém funkce reducer bude provádět aktualizaci stavu v store a prepare - bude vracet objekt payload s vygenerovaným id a dalšími našimi daty:

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

Protože nyní budeme generovat id zde, a ne v komponentě, pojďme přidat nanoid do importu:

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

Nakonec provedeme změny v NewProductForm.jsx. Místo řádku:

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

Budeme mít tento, ve kterém jednoduše přes čárku předáme potřebná data (nezapomeňte v tomto souboru odstranit nanoid z importu):

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

Spusťme aplikaci, pak vytvořme nový produkt a ujistěme se, že jsme nic nepokazili.

Otevřete vaši aplikaci se studenty. V souboru StudentsSlice.js přepište váš reduktor studentAdded tak, aby byl ve formě objektu {reducer, prepare}, jak je ukázáno v lekci.

Proveďte odpovídající změny v souboru NewStudentForm.jsx, jak je ukázáno v lekci. Spusťte aplikaci a ujistěte se, že vše funguje jako dříve.