Dobijanje selektora u Redux-u

Ponekad je veoma korisno osloboditi se suvišnog koda u aplikaciji, kao i inkapsulirati podatke.

Hajde da otvorimo našu aplikaciju sa proizvodima. Obratite pažnju da na nekoliko mesta aplikacije mi, koristeći selektore, izvlačimo slice sa proizvodima kako bismo izvršili neke radnje sa njim.

A sada ćemo otvoriti naš productsSlice.js, spustiti se na sam kraj fajla i dodati par linija koda, u kojima ćemo napisati dva selektora i eksportovati ih. Jedna funkcija će biti za dobijanje svih proizvoda:

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

A posle njega druga - za dobijanje jednog proizvoda po id-u:

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

Naravno, može vam se pojaviti pravedno pitanje - odakle nam ovakav složeni izraz: state.products.products? Odgovor je jednostavan, mi smo na prethodnoj lekciji promenili strukturu slice-a i sada će naši proizvodi biti smešteni u vidu niza u odvojenom svojstvu products slice-a proizvoda state.products (zapamtite, da ovde state predstavlja korenski objekat stanja Redux-a, koji sadrži sve slice-ove).

Tako smo jednostavno preneli kod za funkcije-selektore na jedno mesto u aplikaciji i sada nam je potrebno da unesemo odgovarajuće promene tamo, gde smo ih koristili. Počnimo sa fajlom ProductsList.jsx. Uvezićemo u njega selectAllProducts, pošto nam ovde treba da dobijemo sve proizvode:

import { selectAllProducts } from './productsSlice'

I na početku koda funkcije ProductsList, zamenićemo:

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

Sa linijom:

const products = useSelector(selectAllProducts)

A sada prelazimo na fajl ProductPage.jsx. Ovde nam je trebao proizvod po id-u. Uradićemo zamenu linije (ne zaboravite na import):

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

Sa:

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

Uradite sličnu zamenu sami u fajlu EditProductForm.jsx. Ovde nam takođe treba proizvod po id-u.

Zapamtite, da je ovakva optimizacija samo za vašu udobnost i da je možete uraditi kada smatrate da je potrebna i zgodna. A na našem primeru zamislite da bismo svaki put pisali kod funkcije-selektora na različitim mestima, a onda promenili strukturu state-a, i morali bismo je onda ispravljati u svim komponentama.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl studentsSlice.js. Na samom dnu fajla napišite i eksportujte, kao što je pokazano na lekciji, dva selektora za dobijanje svih studenata selectAllStudents i za dobijanje jednog studenta po id-u selectStudentById.

Sada importujte selectAllStudents i selectStudentById u fajlove StudentsList.jsx, StudentPage.jsx i EditStudentForm.jsx, unesite u tim fajlovima odgovarajuće promene, kao što je pokazano na lekciji.