Priprema podataka za action objekat u Redux-u

Nedavno smo govorili o tome da funkcija createSlice očekuje jedan argument prilikom kreiranja action.payload. S jedne strane, ovo pojednostavljuje njeno korišćenje, sa druge strane može zahtevati dodatne korake za pripremu sadržaja action objekta.

Otvorimo našu aplikaciju sa proizvodima, i u njoj fajl NewProductForm.jsx. Obratite pažnju na sledeću liniju koda:

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

Ovde sastavljamo payload objekat direktno u React komponenti i prosleđujemo ga u akciju productAdded. Šta ako budemo morali da šaljemo istu akciju iz nekoliko komponenti ili ako logika za sastavljanje bude komplikovana? U principu, našoj komponenti bi trebalo da bude svejedno kako izgleda objekat u payload za ovu akciju. Takođe, ne odgovara nam stalno dupliranje koda.

Ove probleme nam opet može pomoći da reši naš poznati createSlice, pošto prilikom pisanja reducera on dozvoljava da koristimo callback-funkciju prepare, u kojoj možemo pisati različitu logiku, generisati nasumične brojeve i slično. U takvom slučaju vrednost za polje reducera može biti predstavljena u obliku sledećeg objekta:

{reducer, prepare}

Otvorimo naš fajl productsSlice.js i izmenimo kod za reducer productAdded. Sada ovaj deo koda:

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

Promešaćemo u sledeći, u kojem će se funkcija reducer baviti ažuriranjem stanja (state) u store-u, a prepare će vraćati objekat payload sa generisanim id i ostalim našim podacima:

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

Pošto ćemo sada generisati id ovde, a ne u komponenti, dodajmo nanoid u import:

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

Na kraju, unesimo izmene u NewProductForm.jsx. Umesto linije:

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

Imaćemo ovakvu, u kojoj ćemo jednostavno preko zareza proslediti potrebne podatke (ne zaboravite u ovom fajlu da uklonite nanoid iz import-a):

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

Pokrenimo aplikaciju, zatim kreirajmo novi proizvod i uverimo se da nismo ništa pokvarili.

Otvorite vašu aplikaciju sa studentima. U fajlu StudentsSlice.js prepišite vaš reducer studentAdded tako, da bude u obliku objekta {reducer, prepare}, kao što je prikazano u lekciji.

Unesite odgovarajuće izmene u fajl NewStudentForm.jsx, kao što je prikazano u lekciji. Pokrenite aplikaciju i uverite se da sve radi kao i ranije.