Forberedelse af data for action-objektet i Redux

For nylig talte vi om, at funktionen createSlice forventer ét argument ved oprettelse af action.payload. På den ene side forenkler dette dens anvendelse, på den anden side kan det kræve yderligere handlinger for at forberede indholdet af action-objektet.

Lad os åbne vores applikation med produkter, og i den filen NewProductForm.jsx. Læg mærke til følgende kodelinje:

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

Her samler vi payload-objektet lige i React-komponenten og sender det til actionen productAdded. Men hvad hvis vi bliver nødt til at sende den samme action fra flere komponenter, eller logikken til samlingen viser sig at være kompleks? I princippet bør vores komponent være ligeglad med, hvordan objektet i payload for denne action ser ud. Derudoor er vi ikke tilfredse med konstant duplikering af kode.

Disse problemer kan vores berømte createSlice igen hjælpe os med at løse, da den ved skrivning af en reducer tillader os at bruge en callback-funktion prepare, hvor vi kan skrive forskellig logik, generere tilfældige tal og mere. I sådant tilfælde kan værdien for reducer-feltet repræsenteres som følgende objekt:

{reducer, prepare}

Lad os åbne vores fil productsSlice.js og ændre koden for reduceren productAdded. Nu er denne kodesnutter:

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

Vi ændrer til følgende, hvor funktionen reducer vil håndtere opdatering af state i storet, og prepare - returnerer payload-objektet med det genererede id og vores andre data:

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

Da vi nu vil generere id her, og ikke i komponenten, lad os tilføje nanoid til importen:

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

Til sidst laver vi ændringerne i NewProductForm.jsx. I stedet for linjen:

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

Vil vi have sådan en, hvor vi simpelthen gennem kommaer sender de nødvendige data (husk at fjerne nanoid fra importen i denne fil):

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

Lad os starte applikationen, derefter oprette et nyt produkt og sikre os, at vi ikke har ødelagt noget.

Åbn din applikation med studerende. I filen StudentsSlice.js omskriv din reducer studentAdded på en sådan måde, at den er i form af et objekt {reducer, prepare}, som vist i lektionen.

Foretag de tilsvarende ændringer i filen NewStudentForm.jsx, som vist i lektionen. Start applikationen og vær sikker på, at alt fungerer som før.