Redux Reducerek

Az előző leckén a createSlice függvény segítségével létrehoztunk egy slice-ot a termékekhez products és egy reducert, amely frissíteni fogja ezt a slice-ot, amely a store-ban tárolódik. Még egyszer emlékeztetek, hogy a Redux-ban az állapot adatait a reducerek segítségével módosítjuk.

Nem szabad elfelejteni, hogy a reducerekre számos korlátozás vonatkozik. A reducer csak a kapott értékek, a jelenlegi állapot és a action objektum alapján frissíti az állapotot, majd eldönti, hogyan módosítsa az állapotot, és visszaadja annak új értékét.

Tudjuk, hogy alapértelmezetten az objektumok és tömbök a JavaScript-ben mutálhatók (megváltoztathatók). Azt is tudjuk, hogy az állapotot közvetlenül nem szabad megváltoztatni, ilyenkor csak másolatokkal kell dolgozni. Ennek a szabálynak a reducernek is meg kell felelnie. De az ilyen logika manuális írása meglehetősen fárasztó és összetett feladat lehet, és itt jön a segítségre a createSlice függvény, amely az Immer könyvtárat használja, ami az 'mutálható' kódodat 'nem mutálhatóvá' alakítja. Így csak a createSlice vagy createReducer függvények használatakor "bűnözhetünk" és egyszerűsíthetjük az életünket.

A reducer korlátozásai közé tartozik továbbá az aszinkron logika, véletlenszerű értékek számítása és egyéb "mellékhatások" végrehajtása. Most, hogy közelebbről megismerkedtünk a reducerrel, térjünk vissza a termékalkalmazásunkhoz.

Alkalmazásunkban van egy store, amelyet az előző leckékben hoztunk létre, de egyelőre nincs benne semmi. Nyissuk meg a store.js fájlunkat, és adjunk hozzá egy kis kódot. Először importáljuk bele a termékek reducer függvényét:

import productsReducer from '../parts/products/productsSlice'

Most reducerként megadhatjuk az importált productsReducer függvényt:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

A fenti sorral azt mondjuk a store-nak, hogy mostantól, amikor egy action történik, a state.products slice összes adatát a productsReducer reducer fogja frissíteni.

Most elindíthatja az alkalmazást (figyelje meg, hogy eltűnt a konzolból az érvénytelen reducerre figyelmeztető üzenet!), nyissa meg a Redux DevTools-ot a böngészőben, és fedezze fel a lapjait. Például, a State lapra kattintva az Inspector ban láthatjuk a két termékobjektumunkat, amelyek az alkalmazás első indításakor az állapot kezdeti értékeként jelennek meg. A Log monitor lapon látjuk, hogy milyen slice-ok vannak a globális állapotban - ez a products slice, amely két objektumot tartalmaz. Nézzen be a Chart lapra is.

Nyissa meg a diákok alkalmazását, és módosítsa a store.js fájl kódját, ahogyan az a leckében bemutatásra került.

Indítsa el a böngészőben az alkalmazását, és fedezze fel a Redux DevTools kiegészítő lapjait.