Veiksmo (action) objekto duomenų paruošimas Redux

Neseniai kalbėjome apie tai, kad funkcija createSlice tikisi vieno argumento kuriant action.payload. Viena vertus, tai supaprastina jos naudojimą, kita vertus, gali prireikti papildomų veiksmų, norint paruošti veiksmo objekto turinį.

Atidarykime mūsų produktų aplikaciją, o joje failą NewProductForm.jsx. Atkreipkite dėmesį į šią kodo eilutę:

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

Čia mes sudarome payload objektą tiesiogiai React komponente ir perduodame jį veiksmui productAdded. O kas, jei mums teks siųsti tą patį veiksmą iš kelių komponentų arba logika sudaryti pasirodys sudėtinga? Idealiu atveju mūsų komponentui turėtų būti nesvarbu, kaip atrodo objektas payload šiam veiksmui. Be to, mums nepatinka nuolatinis kodo dubliavimas.

Šias problemas mums vėl gali padėti išspręsti mūsų garsusis createSlice, kadangi rašant reducerį jis leidžia mums naudoti atgalinio ryšio (callback) funkciją prepare, kurioje galima rašyti įvairią logiką, generuoti atsitiktinius skaičius ir pan. Tokiu atveju reductoraus lauko reikšmė gali būti pateikta kaip toks objektas:

{reducer, prepare}

Atidarykime mūsų failą productsSlice.js ir pakeiskime reductoraus productAdded kodą. Dabar šis kodo gabaliukas:

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

Mes pakeisime jį šiuo, kuriame funkcija reducer užsiims store būsenos atnaujinimu, o prepare - grąžins objektą payload su sugeneruotu id ir kitais mūsų duomenimis:

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

Kadangi dabar mes generuosime id čia, o ne komponente, pridėkime nanoid į importą:

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

Galiausiai atlikime pakeitimus NewProductForm.jsx. Vietoj eilutės:

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

Mes turėsime tokią, kurioje mes tiesiog per kablelį perduosime mums reikalingus duomenis (nepamirškite šiame faile pašalinti nanoid iš importo):

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

Paleiskime aplikaciją, tada sukurkime naują produktą ir įsitikinkime, kad nieko nesugadinome.

Atidarykite savo studentų aplikaciją. Faile StudentsSlice.js perrašykite savo reductorų studentAdded taip, kad jis būtų objekto {reducer, prepare} pavidalu, kaip parodyta pamokoje.

Atlikite atitinkamus pakeitimus faile NewStudentForm.jsx, kaip parodyta pamokoje. Paleiskite aplikaciją ir įsitikinkite, kad viskas veikia taip pat, kaip ir anksčiau.