Selektoru iegūšana Redux

Dažreiz ir ļoti noderīgi atbrīvoties no liekā koda lietotnē, kā arī inkapsulēt datus.

Atvērsim mūsu produktu lietotni. Ievērojiet, ka vairākās vietās lietotnē mēs, izmantojot selektorus, izvelkam produktu slāni, lai ar to veiktu kādas darbības.

Tagad mēs atvērsim mūsu productsSlice.js, nokāpsim līdz pašai faila beigām un pievienosim pāris koda rindiņas, kurās uzrakstīsim divus selektorus un eksportēsim tos. Viena funkcija mums būs visu produktu iegūšanai:

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

Un pēc tam otrā - viena produkta iegūšanai pēc id:

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

Protams, jums var rasties pamatots jautājums - no kurienes mums tāds greznība: state.products.products? Atbilde ir vienkārša, mēs jau pagājušajā nodarbībā mainījām slāņa struktūru un tagad mūsu produkti atradīsies masīva veidā atsevišķā īpašībā products produktu slāņa state.products (atceraties, ka šeit state ir Redux stāvokļa saknes objekts, kas satur visus slāņus).

Tādējādi mēs vienkārši pārvietojām kodu funkcijām-selektoriem vienā vietā lietotnē, un tagad mums ir jāveic atbilstošās izmaiņas tur, kur mēs tās izmantojām. Sāksim ar failu ProductsList.jsx. Importēsim tajā selectAllProducts, jo šeit mums būs jāiegūst visi produkti:

import { selectAllProducts } from './productsSlice'

Un funkcijas ProductsList koda sākumā aizstāsim:

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

Ar rindiņu:

const products = useSelector(selectAllProducts)

Tagad pāriesim pie faila ProductPage.jsx. Šeit mums vajadzēja produktu pēc id. Veiksim aizstāšanu (neaizmirstiet par importu):

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

Uz:

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

Veiciet līdzīgu aizstāšanu paši failā EditProductForm.jsx. Šeit mums arī vajag produktu pēc id.

Atcerieties, ka šāda optimizācija ir tikai jūsu ērtībai, un jūs varat to izdarīt tad, kad uzskatāt to par nepieciešamu un ērtu. Un mūsu piemērā iedomājieties, ka mēs rakstītu selektora funkcijas kodu katru reizi dažādās vietās, un pēc tam mainītu stāvokļa struktūru, un tad tas būtu jālabo visos komponentos.

Atveriet savu studentu lietotni. Atveriet tajā failu studentsSlice.js. Faila beigās uzrakstiet un eksportējiet, kā parādīts nodarbībā, divus selektorus: visu studentu iegūšanai selectAllStudents un viena studenta iegūšanai pēc id selectStudentById.

Tagad importējiet selectAllStudents un selectStudentById failos StudentsList.jsx, StudentPage.jsx un EditStudentForm.jsx, veiciet šajos failos atbilstošās izmaiņas, kā parādīts nodarbībā.