Pregătirea datelor pentru obiectul action în Redux

Recent am vorbit despre faptul că funcția createSlice așteaptă un singur argument la crearea action.payload. Pe de o parte, acest lucru simplifică utilizarea sa, pe de altă parte poate necesita acțiuni suplimentare pentru pregătirea conținutului obiectului action.

Să deschidem aplicația noastră cu produsele, iar în ea fișierul NewProductForm.jsx. Acordați atenție următoarei linii de cod:

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

Aici construim obiectul payload direct în componenta React și îl transmitem în acțiunea productAdded. Dar dacă va trebui să trimitem aceeași acțiune din mai multe componente sau logica pentru construcție se va dovedi a fi complexă? În principiu, componentei noastre nu ar trebui să-i pese cum arată obiectul în payload pentru această acțiune. În plus, nu ne mulțumește duplicarea constantă a codului.

Aceste probleme pot fi din nou rezolvate de celebrul nostru createSlice, deoarece atunci când scriem un reducer, acesta ne permite să folosim funcția callback prepare, în care putem scrie diverse logici, putem genera numere aleatorii și altele asemenea. În acest caz, valoarea pentru câmpul reducerului poate fi reprezentată sub forma următorului obiect:

{reducer, prepare}

Să deschidem fișierul nostru productsSlice.js și să modificăm codul pentru reducerul productAdded. Acum acest fragment de cod:

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

Îl vom schimba cu următorul, în care funcția reducer se va ocupa de actualizarea stării în store, iar prepare - va returna obiectul payload cu id-ul generat și celelalte date ale noastre:

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

Deoarece acum vom genera id-ul aici, și nu în componentă, să adăugăm nanoid în import:

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

În final, vom face modificări în NewProductForm.jsx. În locul liniei:

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

Vom avea aceasta, în care pur și simplu prin virgulă transmitem datele necesare (nu uitați în acest fișier să eliminați nanoid din import):

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

Să pornim aplicația, apoi să creăm un nou produs și să ne asigurăm că nu am stricat nimic.

Deschideți aplicația voastră cu studenții. În fișierul StudentsSlice.js rescrieți reducerul dumneavoastră studentAdded astfel încât să fie sub forma obiectului {reducer, prepare}, așa cum este arătat în lecție.

Faceți modificările corespunzătoare în fișierul NewStudentForm.jsx, așa cum este arătat în lecție. Porniți aplicația și asigurați-vă că totul funcționează ca înainte.