Forberedelse av data for action-objektet i Redux

For ikke lenge siden snakket vi om at funksjonen createSlice forventer ett argument når den oppretter action.payload. På den ene siden forenkler dette bruken, på den andre siden kan det kreve ekstra arbeid for å forberede innholdet i action-objektet.

La oss åpne applikasjonen vår med produkter, og i den filen NewProductForm.jsx. Legg merke til følgende kodelinje:

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

Her bygger vi payload-objektet rett og slett i React-komponenten og sender det til actionen productAdded. Men hva om vi må sende samme action fra flere komponenter eller logikken for å bygge den viser seg å være kompleks? I prinsippet bør komponenten vår være likegyldig til hvordan objektet i payload for denne actionen ser ut. I tillegg er vi ikke fornøyde med konstant kodeduplisering.

Disse problemene kan vår berømte createSlice igjen hjelpe oss med å løse, siden den når vi skriver en reducer tillater oss å bruke en callback-funksjon prepare, der vi kan skrive ulik logikk, generere tilfeldige tall og mer. I et slikt tilfelle kan verdien for reducer-feltet representeres som følgende objekt:

{reducer, prepare}

La oss åpne filen vår productsSlice.js og endre koden for reduceren productAdded. Nå blir denne kodebiten:

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

Vi endrer den til følgende, der funksjonen reducer vil håndtere oppdatering av state i store, og prepare - returnerer payload-objektet med generert id og våre andre data:

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

Siden vi nå skal generere id her, og ikke i komponenten, la oss legge til nanoid i importen:

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

Til slutt, la oss gjøre endringer i NewProductForm.jsx. I stedet for linjen:

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

Vi vil ha en slik, der vi rett og slett via komma sender de nødvendige dataene (husk å fjerne nanoid fra importen i denne filen):

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

La oss starte applikasjonen, deretter opprette et nytt produkt og forsikre oss om at vi ikke har ødelagt noe.

Åpne applikasjonen din med studenter. I filen StudentsSlice.js omskriv reduceren din studentAdded på en slik måte at den er i form av et objekt {reducer, prepare}, som vist i leksjonen.

Gjør de tilsvarende endringene i filen NewStudentForm.jsx, som vist i leksjonen. Start applikasjonen og forsikre deg om at alt fungerer som før.