Het verkrijgen van selectors in Redux

Het is soms erg nuttig om overtollige code in de applicatie te verwijderen en ook gegevens te encapsuleren.

Laten we onze productenapplicatie openen. Let op dat we op verschillende plaatsen in de applicatie, gebruikmakend van selectors, de productenslice ophalen om er bepaalde acties mee uit te voeren.

En nu openen we onze productsSlice.js, scrollen naar het einde van het bestand en voegen een paar regels code toe, waarin we twee selectors schrijven en exporteren. De ene functie zal voor ons zijn om alle producten op te halen:

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

En daarna de tweede - voor het ophalen van één product op basis van id:

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

Natuurlijk kan je de terechte vraag hebben - waarom hebben we zo'n constructie: state.products.products? Het antwoord is simpel, we hebben in de vorige les de structuur van de slice gewijzigd en nu zullen onze producten zich bevinden als een array in een aparte eigenschap products van de productenslice state.products (onthoud dat hier state het root object is van de Redux-state, die alle slices bevat).

Op deze manier hebben we simpelweg de code voor de selector-functies naar één plek in de applicatie verplaatst en nu moeten we de overeenkomstige wijzigingen aanbrengen op de plaatsen waar we ze gebruikten. Laten we beginnen met het bestand ProductsList.jsx. We importeren hierin selectAllProducts, omdat we hier alle producten moeten ophalen:

import { selectAllProducts } from './productsSlice'

En aan het begin van de code van de functie ProductsList, vervangen we:

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

Door de regel:

const products = useSelector(selectAllProducts)

En laten we nu naar het bestand ProductPage.jsx gaan. Hier hadden we een product nodig op basis van id. Laten we de regel vervangen (vergeet de import niet):

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

Door:

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

Voer zelf een soortgelijke vervanging uit in het bestand EditProductForm.jsx. Hier hebben we ook een product nodig op basis van id.

Onthoud dat een dergelijke optimalisatie alleen voor jouw gemak is en je kunt het doen wanneer je het nodig en handig vindt. Stel je in ons voorbeeld voor dat we de code voor de selector-functie elke keer op verschillende plaatsen zouden schrijven, en dan de structuur van de state zouden wijzigen, en het dan in alle componenten zouden moeten corrigeren.

Open je applicatie met studenten. Open daarin het bestand studentsSlice.js. Schrijf onderaan het bestand en exporteer, zoals getoond in de les, twee selectors voor het verkrijgen van alle studenten selectAllStudents en voor het verkrijgen van één student op basis van id selectStudentById.

Importeer nu selectAllStudents en selectStudentById in de bestanden StudentsList.jsx, StudentPage.jsx en EditStudentForm.jsx, breng in deze bestanden de overeenkomstige wijzigingen aan, zoals getoond in de les.