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:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

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

products/productsSlice.jsexport 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:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

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

products/ProductsList.jsxconst products = useSelector((state) => state.products)

Ezt a sort:

products/ProductsList.jsxconst 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):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Erre:

products/ProductPage.jsxconst 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.