Datu sagatavošana action objektam Redux

Nesen mēs ar jums runājām par to, ka funkcija createSlice sagaida vienu argumentu, veidojot action.payload. No vienas puses tas vienkāršo tās lietošanu, no otras puses var būt nepieciešami papildu soļi, lai sagatavotu action objekta saturu.

Atvērsim mūsu lietotni ar produktiem, un tajā failu NewProductForm.jsx. Pievērsiet uzmanību šai koda rindai:

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

Šeit mēs salikām payload objektu tieši React komponentē un nododam to action productAdded. Ko darīt, ja mums nāksies nosūtīt šādu action no vairākām komponentēm vai loģika salikšanai izrādīsies sarežģīta? Idejā mūsu komponentei vajadzētu būt vienalga, kā izskatās objekts payload šim action. Turklāt mums neapmierina pastāvīgā koda dublēšana.

Šīs problēmas atkal var mums palīdzēt atrisināt mūsu slavenais createSlice, jo, rakstot reduceri, tas ļauj mums izmantot callback funkciju prepare, kurā var rakstīt dažādu loģiku, ģenerēt nejaušus skaitļus un citu. Šādā gadījumā vērtību reducera laukam var attēlot kā šādu objektu:

{reducer, prepare}

Atvērsim mūsu failu productsSlice.js un izmainīsim kodu reducerim productAdded. Tagad šis koda gabals:

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

Mēs mainīsim uz šo, kurā funkcija reducer nodarbosies ar stāvokļa atjaunināšanu store, bet prepare - atgriezīs objektu payload ar ģenerētu id un citiem mūsu datiem:

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

Tā kā tagad mēs ģenerēsim id šeit, nevis komponentē, pievienosim nanoid importam:

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

Visbeidzot veiksim izmaiņas NewProductForm.jsx. Tā vietā rindā:

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

Mums būs šāda, kurā mēs vienkārši caur komatu nodosim nepieciešamos datus (neaizmirstiet šajā failā noņemt nanoid no importa):

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

Palaidīsim lietotni, tad izveidosim jaunu produktu un pārliecināsimies, ka mēs neko nesabojājām.

Atveriet savu lietotni ar studentiem. Failā StudentsSlice.js pārrakstiet savu reduceri studentAdded tā, lai tas būtu objekta formā {reducer, prepare}, kā parādīts nodarbībā.

Veiciet atbilstošās izmaiņas failā NewStudentForm.jsx, kā parādīts nodarbībā. Palaidiet lietotni un pārliecinieties, ka viss darbojas tāpat kā iepriekš.