Voorbereiding van data vir die aksie-objek in Redux

Ons het onlangs met jou gepraat oor die feit dat die funksie createSlice een argument verwag wanneer action.payload geskep word. Aan die een kant vereenvoudig dit die gebruik daarvan, aan die ander kant kan dit addisionele stappe vereis om die inhoud van die aksie-objek voor te berei.

Laat ons ons toepassing met produkte oopmaak, en daarin die lêer NewProductForm.jsx. Let op die volgende reël kode:

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

Hier saam ons die payload-objek regstreeks in die React-komponent en stuur dit na die aksie productAdded. Maar wat as ons so 'n aksie vanaf verskeie komponente moet stuur of die logika vir die samestelling ingewikkeld word? In beginsel behoort ons komponent nie om te gee hoe die objek in payload vir hierdie aksie lyk nie. Boonop is ons nie tevrede met die konstante herhaling van kode nie.

Hierdie probleme kan weer deur ons beroemde createSlice opgelos word, aangesien dit by die skryf van 'n reducer ons toelaat om 'n callback-funksie prepare te gebruik, waarin ons verskeie logika kan skryf, ewekansige getalle kan genereer, en so meer. In sulke gevalle kan die waarde vir die reducer-veld voorgestel word as die volgende objek:

{reducer, prepare}

Laat ons ons lêer productsSlice.js oopmaak en die kode vir die reducer productAdded verander. Nou is hierdie stukkie kode:

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

Ons sal dit verander na die volgende, waarin die funksie reducer sal handel oor die bywerking van die state in die store, en prepare - die terugstuur van die payload-objek met die gegenereerde id en ons ander data:

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

Aangesien ons nou die id hier sal genereer, en nie in die komponent nie, laat ons nanoid by die invoer voeg:

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

Laastens, laat ons veranderinge aanbring in NewProductForm.jsx. In plaas van die reël:

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

Sal ons die volgende hê, waarin ons eenvoudig die nodige data deur kommas geskei oordra (moenie vergeet om in hierdie lêer nanoid uit die invoer te verwyder nie):

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

Laat ons die toepassing begin, dan 'n nuwe produk skep en seker maak dat ons niks gebreek het nie.

Maak jou studentetoepassing oop. In die lêer StudentsSlice.js, hers kryf jou reducer studentAdded sodat dit in die vorm van die objek {reducer, prepare} is, soos in die les gewys.

Bring die ooreenstemmende veranderinge aan in die lêer NewStudentForm.jsx, soos gewys in die les. Begin die toepassing en maak seker dat alles soos voorheen werk.