Priprava podatkov za objekt action v Redux

Pred kratkim smo govorili o tem, da funkcija createSlice pričakuje en argument pri ustvarjanju action.payload. Po eni strani to poenostavi njeno uporabo, po drugi strani pa lahko zahteva dodatne korake za pripravo vsebine objekta action.

Odprimo našo aplikacijo s proizvodi in v njej datoteko NewProductForm.jsx. Bodite pozorni na naslednjo vrstico kode:

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

Tukaj sestavljamo payload objekt naravnost v React komponenti in ga posredujemo v action productAdded. Kaj pa, če bomo morali takšen action poslati iz več komponent ali če bo logika za sestavljanje zapletena? V principu bi se naša komponenta ne smela brigati, kako izgleda objekt v payload za ta action. Poleg tega nas ne zadovoljuje nenehno podvajanje kode.

Te težave nam lahko spet pomaga rešiti naš slavni createSlice, saj nam pri pisanju reducerja omogoča uporabo callback funkcije prepare, v kateri lahko pišemo različno logiko, generiramo naključna števila in podobno. V takem primeru lahko vrednost za polje reducerja predstavimo kot naslednji objekt:

{reducer, prepare}

Odprimo našo datoteko productsSlice.js in spremenimo kodo za reducer productAdded. Sedaj je ta del kode:

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

Spremenili ga bomo v naslednjega, kjer bo funkcija reducer skrbela za posodobitev stanja v store, prepare pa bo vračala objekt payload z generiranim id in drugimi našimi podatki:

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

Ker bomo sedaj id generirali tukaj in ne v komponenti, dodajmo nanoid v uvoz:

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

Za konec naredimo spremembe v NewProductForm.jsx. Namesto vrstice:

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

Bomo imeli takšno, kjer preprosto z vejico ločeno posredujemo potrebne podatke (ne pozabite v tej datoteki odstraniti nanoid iz uvoza):

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

Zaženimo aplikacijo, nato ustvarimo nov proizvod in se prepričajmo, da nismo ničesar pokvarili.

Odprite vašo aplikacijo s študenti. V datoteki StudentsSlice.js prepišite vaš reducer studentAdded tako, da bo v obliki objekta {reducer, prepare}, kot je prikazano v lekciji.

Naredite ustrezne spremembe v datoteki NewStudentForm.jsx, kot je prikazano v lekciji. Zaženite aplikacijo in se prepričajte, da vse deluje kot prej.