Az állapotstruktúra módosítása a Redux-ban

Az első lépés, amit megvalósítunk a Redux alkalmazásunk és egy külső szerver kölcsönhatása során - az az adatok lekérése, amelyek azon tárolódnak az alkalmazás indításakor. De először végezzünk el néhány módosítást az alkalmazásunkban.

Nyissuk meg a termékek alkalmazásunkat, és benne a productsSlice.js fájlt. Figyeljük meg a initialState definícióját. Eredetileg a termékek productsSlice szeletünk egy tömb, amelyben vannak objektumok (esetünkben kettő) a termékek adataival. Először is, mivel mostantól a szerverről fogjuk betölteni őket, el kell távolítanunk őket a initialState-ből. Másodszor, API kéréseket fogunk küldeni a szerverre, és fontos lesz tudni azok állapotáról. Ezt a két dolgot figyelembe véve, alakítsuk át a initialState-ot. Legyen mostantól ez egy objektum a products mezővel (kezdetben itt nem lesznek adatok, csak egy üres tömb), status és error mezőkkel. Most a initialState kódja egy kicsit rövidebb lesz:

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

Egyelőre a státuszt 'idle'-re (tétlenség) állítottuk, hiszen kezdetben nem küldünk ki semmilyen kérést, de egyébként megváltozik és felveheti a 'loading', 'succeeded', 'failed' értékeket. Ne feledjük, hogy az állapot jelölésére bármilyen, számunkra kényelmes nevet választhatunk.

Menjünk lejjebb a kódban. A initialState módosítását követően meg kell változtatnunk azon a kódot is, ahol ezzel az állapottal dolgozunk a reducerekben. Nézzük meg a productAdded kódját:

state.push(action.payload)

Mostantól az új termékeket nem közvetlenül a state-be fogjuk helyezni, hanem annak state.products tulajdonságába. Ezért cseréljük le a fenti sort erre:

state.products.push(action.payload)

Ennek megfelelően végezzük el ugyanezeket a módosításokat a reactionClicked reducer esetében is. Ahelyett, hogy:

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

Mostantól ez lesz:

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

Cserélje le saját maga a state-et state.products-ra a productUpdated reducer kódjában is.

Nyissa meg a diákok alkalmazását. Nyissa meg benne a studentsSlice.js fájlt. Legyen mostantól a initialState-nek három tulajdonsága: students, status, error - alakítsa át, ahogyan az az órán bemutatásra került.

Végezze el a megfelelő módosításokat a kód további részében is. Cserélje le a state-ot state.students-ra a három reducer függvény kódjában.