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ů:

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

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

export 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:

import { selectAllProducts } from './productsSlice'

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

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

Tímto řádkem:

const 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):

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

Na:

const 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.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor studentsSlice.js. Na úplném konci souboru napište a exportujte, jak je ukázáno v lekci, dva selektory pro získání všech studentů selectAllStudents a pro získání jednoho studenta podle id selectStudentById.

Nyní importujte selectAllStudents a selectStudentById do souborů StudentsList.jsx, StudentPage.jsx a EditStudentForm.jsx, proveďte v těchto souborech odpovídající změny, jak je ukázáno v lekci.