Selektorių gavimas Redux

Kartais labai naudinga atsikratyti nereikalingo kodo programoje, taip pat inkapsuliuoti duomenis.

Atidarykime mūsų produktų programą. Atkreipkite dėmesį, kad keliose vietose programoje mes, naudodami selektorius, ištraukiame produktų dalį (slice), kad su ja atliktume kokius nors veiksmus.

O dabar atidarykime mūsų productsSlice.js, nusileiskime pačią failo pabaigą ir pridėkime porą eilučių kodo, kuriame parašysime du selektorius ir juos eksportuosime. Viena funkcija mums bus skirti visiems produktams gauti:

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

Ir po jos antra - vienam produktui pagal id gauti:

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

Žinoma, jums gali kilti teisėtas klausimas - iš kur mums toks sudėtingumas: state.products.products? Atsakymas paprastas, mes juk praeitoje pamokoje pakeitėme dalinės būsenos (slice) struktūrą ir dabar mūsų produktai bus randami kaip masyvas atskirame savybėje products produktų dalies state.products (atminkite, kad čia state - tai pagrindinis Redux būsenos objektas, kuriame yra visos dalinės būsenos (slices)).

Taigi mes tiesiog perkėlėme kodą funkcijoms-selektoriams į vieną vietą programoje ir dabar mums reikia atlikti atitinkamus pakeitimus ten, kur juos naudojome. Pradėkime nuo failo ProductsList.jsx. Importuokime į jį selectAllProducts, nes čia mums reikės gauti visus produktus:

import { selectAllProducts } from './productsSlice'

Ir funkcijos ProductsList pradžioje, pakeiskime:

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

Šia eilute:

const products = useSelector(selectAllProducts)

O dabar pereikime prie failo ProductPage.jsx. Čia mums reikėjo produkto pagal id. Atlikime eilutės pakeitimą (nepamirškite apie importą):

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

Į:

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

Atlikite panašų pakeitimą patys faile EditProductForm.jsx. Čia mums taip pat reikia produkto pagal id.

Atminkite, kad toks optimizavimas tik jūsų patogumui ir jūs galite jį atlikti tada, kai laikysite tai reikalingu ir patogiu. O mūsų pavyzdyje įsivaizduokite, kad mes rašytume funkcijos-selektoriaus kodą kiekvieną kartą skirtingose vietose, o vėliau pakeistume būsenos struktūrą, ir tada tektų jį taisyti visuose komponentuose.

Atidarykite savo studentų programą. Atidarykite joje failą studentsSlice.js. Pačiame failo apačioje parašykite ir eksportuokite, kaip parodyta pamokoje, du selektorius: visiems studentams gauti selectAllStudents ir vienam studentui pagal id gauti selectStudentById.

Dabar importuokite selectAllStudents ir selectStudentById į failus StudentsList.jsx, StudentPage.jsx ir EditStudentForm.jsx, atlikite šiuose failuose atitinkamus pakeitimus, kaip parodyta pamokoje.