Získávání selektorů v Reduxu

Někdy je velmi užitečné zbavit se nadbytečného kódu v aplikaci a také zapouzdřit data.

Pojďme otevřít naši aplikaci s produkty. Všimněte si, že na několika místech aplikace jsme pomocí selektorů vytahovali slice s produkty, abychom s ním provedli nějaké akce.

A teď otevřeme náš productsSlice.js, sjedeme na úplný konec souboru a přidáme pár řádků kódu, ve kterém napíšeme dva selektory a exportujeme je. Jedna funkce bude pro získání všech produktů:

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

A po něm druhá - pro získání jednoho produktu podle id:

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

Jistě vás může napadnout spravedlivá otázka - odkud máme takovouhle vazbu: state.products.products? Odpověď je jednoduchá, my jsme na minulé lekci změnili strukturu slice a teď budou naše produkty umístěny jako pole v samostatné vlastnosti products slice produktů state.products (pamatujte, že zde state je kořenový objekt stavu Redux, který obsahuje všechny slice).

Takto jsme jednoduše přenesli kód pro funkce-selektory na jedno místo v aplikaci a teď potřebujeme provést odpovídající změny tam, kde jsme je použili. Začněme souborem ProductsList.jsx. Importujme do něj selectAllProducts, protože zde potřebujeme získat všechny produkty:

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

A na začátku kodu funkce ProductsList nahradíme:

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

Tímto řádkem:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

A teď přejděme k souboru ProductPage.jsx. Zde jsme potřebovali produkt podle id. Provedeme nahrazení řádku (nezapomeňte na import):

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

Na:

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

Podobnou výměnu proveďte sami v souboru EditProductForm.jsx. Zde také potřebujeme produkt podle id.

Pamatujte, že taková optimalizace je pouze pro vaše pohodlí a můžete ji provést kdykoli ji budete považovat za potřebnou a vhodnou. A v našem příkladu si představte, že bychom psali kód funkce-selektoru pokaždé na různých místech, a pak bychom změnili strukturu stavu, a museli bychom ho pak opravovat ve všech komponentách.