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:

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

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

export 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:

import { selectAllProducts } from './productsSlice'

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

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

Bu sətirlə:

const 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):

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

Bununla:

const 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.

Tələbələrlə olan tətbiqinizi açın. Orada studentsSlice.js faylını açın. Faylın ən aşağısında dərsdə göstərildiyi kimi, bütün tələbələri almaq üçün selectAllStudents və id-ə görə bir tələbə almaq üçün selectStudentById adlı iki selektor yazın və ixrac edin.

İndi selectAllStudents və selectStudentById selektorlarını StudentsList.jsx, StudentPage.jsx və EditStudentForm.jsx fayllarına import edin, bu fayllarda dərsdə göstərildiyi kimi müvafiq dəyişiklikləri edin.