Selektorite hankimine Reduxis

Vahel on väga kasulik vabaneda rakenduses olevast liigsest koodist ja samuti kapseldada andmeid.

Avame oma tooterakenduse. Pange tähele, et mitmes kohas rakenduses me kasutame selektoreid, et hankida tootede lõik, et sellega mõningaid toiminguid sooritada.

Praegu avame oma productsSlice.js, kerime faili lõppu ja lisame paar koodirida, kus kirjutame kaks selektorit ja ekspordime need. Üks funktsioon on meil kõigi toodete saamiseks:

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

Ja pärast seda teine - ühe toote saamiseks id järgi:

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

Muidugi võib tekkida õigustatud küsimus - kust meil selline keerukus: state.products.products? Vastus on lihtne, me ju muutsime eelmisel tunnil lõigu struktuuri ja nüüd asuvad meie tooted massiivina eraldi omaduses products toodete lõigul state.products (pidage meeles, et siin state on Reduxi juurobjekt olekust, mis sisaldab kõiki lõike).

Seega lihtsalt viisime koodi selektorite funktsioonide jaoks ühte kohta rakenduses ja nüüd peame tegema vastavad muudatused seal, kus me neid kasutasime. Alustame failist ProductsList.jsx. Impordime sellesse selectAllProducts, kuna siin on meil vaja saada kõik tooted:

import { selectAllProducts } from './productsSlice'

Ja funktsiooni ProductsList koodi alguses asendame:

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

Reaga:

const products = useSelector(selectAllProducts)

Ja nüüd liigume faili ProductPage.jsx juurde. Siin oli meil vaja toodet id järgi. Teeme rea asendamise (ärge unustage importi):

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

Väärtusega:

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

Tehke sarnane asendus ise failis EditProductForm.jsx. Siin on meil samuti vaja toodet id järgi.

Pidage meeles, et selline optimeerimine on ainult teie mugavuseks ja te võite selle teha siis, kui peate seda vajalikuks ja mugavaks. Ja meie näitel kujutage ette, et me kirjutaksime selektori funktsiooni koodi igal korral erinevates kohtades ja siis muudaksime oleku struktuuri, ja siis peaksime seda parandama kõigis komponentides.

Avage oma üliõpilaste rakendus. Avage selles fail studentsSlice.js. Faili väga põhjas kirjutage ja eksportige, nagu on näidatud tunnis, kaks selektorit kõigi üliõpilaste saamiseks selectAllStudents ja ühe üliõpilase saamiseks id järgi selectStudentById.

Nüüd importige selectAllStudents ja selectStudentById failidesse StudentsList.jsx, StudentPage.jsx ja EditStudentForm.jsx, viige nendes failides läbi vastavad muudatused, nagu on näidatud tunnis.