Andmete ettevalmistamine Reduxi tegevusobjektile
{Hiljuti rääkisime teiega, et}
{funktsioon} createSlice {ootab ühte}
{argumenti} action.payload {loomisel.}
{Ühest küljest lihtsustab see selle kasutamist,}
{teisest küljest võib see nõuda täiendavaid}
{meetmeid tegevusobjekti sisu ettevalmistamiseks.}
{Avame oma tooterakenduse ja selles faili} NewProductForm.jsx.
{Pöörake tähelepanu järgmisele koodireale:}
dispatch(productAdded({
id: nanoid(), name, desc, price, amount
}))
{Siin koostame} payload {objekti}
{otse React komponendis ja edastame selle}
{tegevusse} productAdded. {Aga mis siis, kui me}
{peame saatma sama tegevuse mitmest}
{komponendist või kui koostamise loogika osutub keeruliseks?}
{Idee poolest ei peaks meie komponendil olema vahet,}
{kuidas} payload {objekt selle tegevuse jaoks välja näeb.}
{Samuti ei meeldi meile pidev koodi dubleerimine.}
{Neid probleeme võib aidata lahendada}
{meie kuulus} createSlice, {kuna redutseeri kirjutamisel}
{võimaldab see meil kasutada tagasikutsefunktsiooni}
prepare, {milles saab kirjutada erinevat}
{loogikat, genereerida juhuslikke numbreid ja muud sarnast.}
{Sellisel juhul saab redutseerija välja väärtust}
{esitada järgmise objekti kujul:}
{reducer, prepare}
{Avame oma faili} productsSlice.js
{ja muudame koodi redutseerija} productAdded {jaoks.}
{Nüüd on see koodilõik:}
productAdded(state, action) {
state.push(action.payload)
},
{Me muudame selle järgnevaks, kus}
{funktsioon} reducer {tegeleb}
{poe oleku uuendamisega ja} prepare -
{tagastab} payload {objekti}
{genereeritud id ja teie andmetega:}
productAdded: {
reducer(state, action) {
state.push(action.payload)
},
prepare(name, desc, price, amount) {
return {
payload: {
id: nanoid(),
name,
desc,
price,
amount,
},
}
},
},
{Kuna nüüd genereerime id siin,} {mitte komponendis, lisame nanoidi importi:}
import { createSlice, nanoid } from '@reduxjs/toolkit'
{Lõpetuseks teeme muudatused}
{failis} NewProductForm.jsx. {Rea asemel:}
dispatch(productAdded({
id: nanoid(), name, desc, price, amount
}))
{Meil on see, kus me lihtsalt}
{koma abil edastame vajalikud}
{andmed} ({ärge unustage selles failis eemaldada}
nanoid {importist}):
dispatch(productAdded(name, desc, price, amount))
{Käivitame rakenduse, loome uue} {toote ja veendume, et me midagi} {katki ei teinud.}
{Avage oma üliõpilaste rakendus.}
{Failis} StudentsSlice.js {kirjutage ümber}
{oma redutseerija} studentAdded {nii,}
{et see oleks objekti kujul} {reducer, prepare},
{nagu näidatud õppetükis.}
{Tehke vastavad muudatused}
{failis} NewStudentForm.jsx, {nagu näidatud}
{õppetükis. Käivitage rakendus ja veenduge,}
{et kõik töötab nagu enne.}
