Pridobivanje selektorjev v Reduxu

Včasih je zelo koristno, da se znebimo odvečne kode v aplikaciji, pa tudi da inkapsuliramo podatke.

Odprimo našo aplikacijo s produkti. Opozorimo, da na več mestih aplikacije z uporabo selektorjev pridobivamo slice s produkti, da z njim izvedemo nekatere akcije.

Trenutno bomo odprli naš productsSlice.js, se spustili na sam konec datoteke in dodali nekaj vrstic kode, v kateri bomo napisali dva selektorja in jih izvozili. Ena funkcija bo za pridobitev vseh produktov:

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

In za njo druga - za pridobitev enega produkta po id:

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

Seveda se lahko pojavi upravičeno vprašanje - od kod imamo takšno zapletenost: state.products.products? Odgovor je preprost, saj smo v prejšnji lekciji spremenili strukturo slicea in zdaj bodo naši produkti shranjeni kot matrika v ločenem propertyu products slicea produktov state.products (zapomnite si, da je tukaj state - korenski objekt stanja Redux, ki vsebuje vse slice).

Tako smo preprosto premaknili kodo za funkcije-selektorje na eno mesto v aplikaciji in zdaj moramo opraviti ustrezne spremembe tam, kjer smo jih uporabljali. Začnimo z datoteko ProductsList.jsx. Uvozimo vanjo selectAllProducts, saj tukaj potrebujemo pridobiti vse produkte:

import { selectAllProducts } from './productsSlice'

In na začetku kode funkcije ProductsList, zamenjajmo:

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

Z vrstico:

const products = useSelector(selectAllProducts)

In zdaj pojdimo k datoteki ProductPage.jsx. Tukaj smo potrebovali produkt po id. Naredimo zamenjavo vrstice (ne pozabite na uvoz):

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

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

Podobno zamenjavo naredite sami v datoteki EditProductForm.jsx. Tukaj prav tako potrebujemo produkt po id.

Zapomnite si, da je takšna optimizacija samo za vašo udobje in jo lahko naredite takrat, ko menite, da je potrebna in priročna. In na našem primeru si predstavljajte, da bi pisali kodo funkcije-selektorja vsakič v različnih mestih, potem pa bi spremenili strukturo statea, in ga bi potem morali popraviti v vseh komponentah.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko studentsSlice.js. Čisto na dnu datoteke napišite in izvozite, kot je prikazano v lekciji, dva selektorja za pridobitev vseh študentov selectAllStudents in za pridobitev enega študenta po id selectStudentById.

Zdaj uvozite selectAllStudents in selectStudentById v datoteke StudentsList.jsx, StudentPage.jsx in EditStudentForm.jsx, opravite v teh datotekah ustrezne spremembe, kot je prikazano v lekciji.