Szelektorok lekérése Redux-ban

Időnként nagyon hasznos megszabadulni a felesleges kódtól az alkalmazásban, valamint inkapszulálni az adatokat.

Nyissuk meg a termékek alkalmazásunkat. Figyeljük meg, hogy az alkalmazás több helyén mi, szelektorokat használva, kihúzzuk a termékek slice-ját, hogy valamilyen műveletet hajtsunk végre velük.

Most pedig nyissuk meg a productsSlice.js fájlt, menjünk a fájl legvégére és adjunk hozzá pár sort kódot, amiben írunk két szelektort és exportáljuk őket. Az egyik függvény az összes termék lekérésére szolgál:

export const selectAllProducts = (state) => state.products.products

Utána pedig a második - egy termék lekérésére id alapján:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Természetesen felmerülhet bennetek egy jogos kérdés - honnan van egy ilyen bonyolultság: state.products.products? A válasz egyszerű, hiszen a múlt leckén megváltoztattuk a slice szerkezetét és mostantól a termékeink tömb formájában egy külön products nevű tulajdonságban lesznek elhelyezve a termékek state.products slice-jában (emlékezzetek, hogy itt a state a Redux állapot gyökérobjektuma, ami tartalmazza az összes slice-ot).

Így egyszerűen áthelyeztük a szelektor függvények kódját egy helyre az alkalmazáson belül és most meg kell tennünk a szükséges módosításokat ott, ahol használtuk őket. Kezdjük a ProductsList.jsx fájllal. Importáljuk bele a selectAllProducts-t, mivel itt az összes termékre van szükségünk:

import { selectAllProducts } from './productsSlice'

És a ProductsList függvény kódjának elején cseréljük le:

const products = useSelector((state) => state.products)

Ezt a sort:

const products = useSelector(selectAllProducts)

Most pedig menjünk a ProductPage.jsx fájlhoz. Itt egy termékre volt szükségünk id alapján. Cseréljük le a sort (ne felejtsük el az importot):

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

Erre:

const product = useSelector((state) => selectProductById(state, productId))

Végezzétek el hasonló cserét magatok a EditProductForm.jsx fájlban. Itt szintén egy termékre van szükségünk id alapján.

Ne feledjétek, hogy egy ilyen optimalizálás csak a ti kényelmetek szolgálja és akkor tehetitek meg, amikor szükségesnek és kényelmesnek tartjátok. Példánkon gondoljátok át, hogy ha írni kellene a szelektor függvény kódját minden alkalommal különböző helyeken, majd később megváltoztatnánk az állapot szerkezetét, akkor azt kellene javítani minden komponensben.

Nyissátok meg a diákok alkalmazásotokat. Nyissátok meg benne a studentsSlice.js fájlt. A fájl legalján írjátok és exportáljátok, ahogy a leckében is láttátok, két szelektort az összes diák lekérésére selectAllStudents és egy diák lekérésére id alapján selectStudentById.

Most importáljátok a selectAllStudents és a selectStudentById szelektorokat a StudentsList.jsx, StudentPage.jsx és EditStudentForm.jsx fájlokba, végezzétek el ezekben a fájlokban a szükséges módosításokat, ahogy a leckében is láttátok.