Spreminjanje strukture stanja v Redux

Prva faza, ki jo bomo implementirali za interakcijo naše Redux aplikacije z nekim zunanjim strežnikom - je pridobivanje podatkov, ki so na njem shranjeni ob zagonu aplikacije. Toda prej naredimo nekaj sprememb v našo aplikacijo.

Odprimo našo aplikacijo s produkti, v njej pa datoteko productsSlice.js. Bodite pozorni na definicijo initialState. Sprva je naš rezinec s produkti productsSlice - matrika, v kateri so objekti (v našem primeru sta dva) s podatki produktov. Prvič, ker jih bomo zdaj naložili s strežnika, jih moramo odstraniti iz initialState. Drugič, poslali bomo na strežnik API zahteve in pomembno bo vedeti o njihovem statusu. Upoštevajoč ti dve stvari, prepišimo initialState. Naj bo zdaj preprosto objekt s polji products sprva tu ne bo podatkov, ampak prazna matrika), status in error. Zdaj bo naša koda za initialState postala malo krajša:

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

Za zdaj smo postavili status 'idle' (mirovanje), saj sprva ne pošljemo nobenih zahtev, na splošno pa se bo spreminjal in lahko sprejme vrednosti 'loading', 'succeeded', 'failed'. Ne pozabite, da za označevanje statusa lahko izberete tista imena, ki vam bodo udobna.

Spustimo se nižje po kodi. Po spremembi initialState, moramo spremeniti tudi kodo, v kteri delamo s tem stanjem v reduktorjih. Poglejmo kodo za productAdded:

state.push(action.payload)

Zdaj bomo nove produkte dodajali ne preprosto v state za produkte, ampak v njegovo lastnost state.products. Zato zamenjajmo zgornjo vrstico z:

state.products.push(action.payload)

Ustrezno naredimo enake spremembe za reduktor reactionClicked. Namesto:

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

Zdaj bo:

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

Zamenjajte sami state z state.products tudi v kodi reduktorja productUpdated.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko studentsSlice.js. Naj bo zdaj vaš initialState imel tri lastnosti: students, status, error - preoblikujte ga, kot je prikazano v lekciji.

Vnesite ustrezne spremembe tudi nižje po kodi. Zamenjajte state z state.students v kodi za vaše tri reduktorje.