Förberedelse av data för ett action-objekt i Redux

Nyligen pratade vi om att funktionen createSlice förväntar sig ett argument när den skapar action.payload. Å ena sidan förenklar detta dess användning, å andra sidan kan det kräva extra åtgärder för att förbereda innehållet i action-objektet.

Låt oss öppna vår produktapplikation, och i den filen NewProductForm.jsx. Lägg märke till följande kodrad:

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

Här sammanställer vi payload-objektet direkt i React-komponenten och skickar det till action productAdded. Men vad händer om vi behöver skicka samma action från flera komponenter eller om logiken för sammanställningen blir komplex? I princip borde vår komponent vara oberoende av hur objektet i payload för denna action ser ut. Dessutom är vi inte nöjda med konstant kodduplicering.

Dessa problem kan vår berömda createSlice återigen hjälpa oss att lösa, eftersom den när vi skriver en reducer tillåter oss att använda en callback-funktion prepare, där vi kan skriva olika logik, generera slumpmässiga nummer och så vidare. I så fall kan värdet för reducer-fältet representeras som följande objekt:

{reducer, prepare}

Låt oss öppna vår fil productsSlice.js och ändra koden för reducern productAdded. Nu kommer denna kodbit:

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

Vi ändrar till följande, där funktionen reducer kommer att hantera uppdateringen av state i store, och prepare - returnera payload-objektet med ett genererat id och vår andra data:

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

Eftersom vi nu kommer att generera id här, och inte i komponenten, låt oss lägga till nanoid i importen:

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

Slutligen gör vi ändringar i NewProductForm.jsx. Istället för raden:

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

Kommer vi att ha denna, där vi helt enkelt skickar den data vi behöver, separerat med kommatecken (kom ihåg att ta bort nanoid från importen i denna fil):

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

Låt oss starta applikationen, sedan skapa en ny produkt och se till att vi inte har förstört något.

Öppna din studentapplikation. I filen StudentsSlice.js skriver du om din reducer studentAdded så att den är i form av ett objekt {reducer, prepare}, som visas i lektionen.

Gör motsvarande ändringar i filen NewStudentForm.jsx, som visas i lektionen. Starta applikationen och se till att allt fungerar som förut.