Redux-də selektorların alınması

Bəzən tətbiqdə lazımsız koddan qurtulmaq, həmçinin məlumatları inkapsulyasiya etmək çox faydalıdır.

Gəlin məhsullarla olan tətbiqimizi açaq. Diqqət yetirin ki, tətbiqin bir neçə yerində biz, selektorlardan istifadə edərək, məhsullar slaysini müəyyən əməliyyatlar yerinə yetirmək üçün çıxarırıq.

İndi isə biz productsSlice.js faylımızı açaq, faylın sonuna enək və bir neçə sətir kod əlavə edək, burada iki selektor funksiyası yazıb onları ixrac edəcəyik. Bir funksiya bütün məhsulları almaq üçün olacaq:

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

Ondan sonra isə ikincisi - id-ə görə bir məhsul almaq üçün:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

Əlbəttə ki, ağlınıza haqlı sual gələ bilər - bizdə belə bir quruluş: state.products.products hardandır? Cavab sadədir, biz keçən dərsdə slaysın quruluşunu dəyişdik və indi bizim məhsullarımız slaysın ayrıca products xassəsində massiv şəklində yerləşəcək state.products (xatırlayın ki, burada state - bütün Redux slayslarını özündə saxlayan kök Redux state obyektidir).

Beləliklə, biz sadəcə funksiya-selektorlar üçün kodu tətbiqdə bir yerə köçürdük və indi biz onları istifadə etdiyimiz yerlərdə müvafiq dəyişikliklər etməliyik. ProductsList.jsx faylından başlayaq. Burada bizə bütün məhsulları almaq lazım olduğu üçün selectAllProducts import edək:

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

Və ProductsList funksiyasının kodunun əvvəlində, aşağıdakını əvəz edək:

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

Bu sətirlə:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

İndi isə ProductPage.jsx faylına keçək. Burada bizə id-ə görə məhsul lazım idi. Sətiri dəyişək (import etməyi unutmayın):

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

Bununla:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

EditProductForm.jsx faylında oxşar dəyişikliyi özünüz edin. Burada bizə də id-ə görə məhsul lazımdır.

Xatırlayın ki, belə bir optimallaşdırma yalnız sizin rahatlığınız üçündür və siz onu lazımlı və rahat hesab etdiyiniz zaman edə bilərsiniz. Nümunəmizdə isə təsəvvür edin ki, biz selektor funksiyasının kodunu hər dəfə müxtəlif yerlərdə yazırdıq, sonra isə state quruluşunu dəyişdik və onu bütün komponentlərdə düzəltmək lazım gəlirdi.