Reduxi oleku struktuuri muutmine

Esimene etapp, mida me rakendame oma Reduxi rakenduse interaktsiooniks mõne välise serveriga - on andmete hankimine, mis sellel salvestatakse rakenduse käivitamisel. Kuid enne tehkem meie rakendusse mõned muudatused.

Avame oma tooterakenduse ja selles faili productsSlice.js. Pöörake tähelepanu initialState määratlusele. Algselt on meie toodete productsSlice - massiiv, milles on objektid (meie puhul kaks) toodete andmetega. Esiteks, kuna nüüd hakkame neid serverist laadima, peame need eemaldama initialState-st. Teiseks, me hakkame serverile saatma API päringuid ja meie jaoks on oluline teada nende staatust. Neid kahte asja arvestades, muudame initialState. Olgu see nüüd lihtsalt objekt väljadega products (algselt ei ole siin mingeid andmeid, vaid tühi massiiv), status ja error. Nüüd muutub meie initialState kood veidi lühemaks:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Praegu oleme määranud staatuseks 'idle' (tegevusetus), kuna algselt me ei saada ühtegi päringut, kuid üldiselt muutub see ja võib võtta väärtusi 'loading', 'succeeded', 'failed'. Pidage meeles, et staatuse tähistamiseks võite valida need nimed, mis on teile mugavad.

Liigume allapoole koodi järgi. Pärast initialState muutmist peame muutma ka koodi, kus me töötame selle olekuga redutserite funktsioonides. Vaatame productAdded koodi:

state.push(action.payload)

Nüüd paneme uued tooted mitte lihtsalt toodete olekusse, vaid selle omadusse state.products. Seetõttu asendame ülalmainitud rea järgmisega:

state.products.push(action.payload)

Vastavalt teeme samad muudatused redutseri reactionClicked jaoks. Selle asemel:

const currentProduct = state.find((product) => product.id === productId)

Nüüd on:

const currentProduct = state.products.find((product) => product.id === productId)

Asendage ise state väärtusega state.products redutseri productUpdated koodis.

Avage oma õpilaste rakendus. Avage selles fail studentsSlice.js. Olgu nüüd teie initialState väärtusel kolm omadust: students, status, error - muutke seda nagu näidatud tunnis.

Tehke vastavad muudatused ka allpool koodis. Asendage state väärtusega state.students teie kolme redutseri funktsiooni koodis.