Získavanie selektorov v Reduxe

Niekedy je veľmi užitočné zbaviť sa nadbytočného kódu v aplikácii, ako aj inkapsulovať dáta.

Otvorme našu aplikáciu s produktmi. Všimnite si, že na niekoľkých miestach aplikácie sme, pomocou selektorov, vytiahli slice s produktami, aby sme s ním vykonali nejaké akcie.

A teraz otvoríme náš productsSlice.js, zostúpime na úplný koniec súboru a pridáme pár riadkov kódu, v ktorom napíšeme dva selektory a exportujeme ich. Jedna funkcia u nás bude na získanie všetkých produktov:

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

A po ňom druhá - na získanie jedného produktu podľa id:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

Samozrejme, môže vám nastať oprávnená otázka - odkiaľ máme takýto zápis: state.products.products? Odpoveď je jednoduchá, veď sme na minulej lekcii zmenili štruktúru slice a teraz naše produkty budú uložené ako pole v samostatnej vlastnosti products slice produktov state.products (pamätajte, že tu state je koreňový objekt stavu Redux, ktorý obsahuje všetky slice).

Takto sme jednoducho presunuli kód pre funkcie-selektory na jedno miesto v aplikácii a teraz potrebujeme vykonať zodpovedajúce zmeny tam, kde sme ich použili. Začnime so súborom ProductsList.jsx. Importujme do neho selectAllProducts, pretože tu nám treba získať všetky produkty:

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

A na začiatku kódu funkcie ProductsList nahraďme:

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

Týmto riadkom:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

A teraz prejdime k súboru ProductPage.jsx. Tu bol potrebný produkt podľa id. Urobme nahradenie riadku (nezabudnite na import):

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

Za:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

Podobnú výmenu urobte sami v súbore EditProductForm.jsx. Tu nám tiež treba produkt podľa id.

Pamätajte, že takáto optimalizácia je len pre vaše pohodlie a môžete ju urobiť vtedy, keď ju budete považovať za potrebnú a vhodnú. Na našom príklade si predstavte, že by sme písali kód funkcie-selektora zakaždým na rôznych miestach, a potom by sme zmenili štruktúru stavu, a museli by sme ho potom opravovať vo všetkých komponentoch.