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:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

Ir po jos antra - vienam produktui pagal id gauti:

products/productsSlice.jsexport 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:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

Ir funkcijos ProductsList pradžioje, pakeiskime:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

Šia eilute:

products/ProductsList.jsxconst 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ą):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Į:

products/ProductPage.jsxconst 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.