Ընտրիչներ ստանալը Redux-ում

Երբեմն շատ օգտակար է ազատվել հավելվածի ավելորդ կոդից, ինչպես նաև ինկապսուլացնել տվյալները:

Եկեք բացենք մեր ապրանքների հավելվածը: Ուշադրություն դարձրեք, որ հավելվածի մի քանի տեղ մենք, օգտագործելով ընտրիչներ, դուրս ենք բերում ապրանքների սլայսը, որոշ գործողություններ կատարելու համար:

Իսկ հիմա մենք կբացենք մեր productsSlice.js ֆայլը, կիջնենք ֆայլի ամենավերջ և կավելացնենք մի քանի տող կոդ, որում կգրենք երկու ընտրիչ և կէքսպորտավորենք դրանք: Մի ֆունկցիա մեզ կծառայի բոլոր ապրանքները ստանալու համար:

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

Իսկ դրանից հետո երկրորդը՝ մեկ ապրանքը id-ով ստանալու համար:

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

Իհարկե, ձեր մոտ կարող է առաջանալ արդարացի հարց՝ որտեղից ունենք այսպիսի կառուցվածք՝ state.products.products? Պատասխանը պարզ է, մենք վերջիվերջո նախորդ դասին փոխեցինք սլայսի կառուցվածքը և այժմ մեր ապրանքները կգտնվեն որպես զանգված՝ առանձին products հատկության մեջ՝ ապրանքների սլայսի state.products-ում (հիշեք, որ այստեղ state-ը Redux-ի արմատային օբյեկտն է, որը պարունակում է բոլոր սլայսերը):

Այսպիսով, մենք պարզապես տեղափոխեցինք ընտրիչ-ֆունկցիաների կոդը դեպի մեկ տեղ հավելվածում և այժմ մեզ անհրաժեշտ է կատարել համապատասխան փոփոխություններ այնտեղ, որտեղ դրանք օգտագործել ենք: Սկսենք ProductsList.jsx ֆայլից: Էմպորտավորենք այնտեղ selectAllProducts-ը, քանի որ այստեղ մեզ անհրաժեշտ է ստանալ բոլոր ապրանքները:

import { selectAllProducts } from './productsSlice'

Եվ ProductsList ֆունկցիայի կոդի սկզբում, փոխարինենք.

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

Ստորև բերված տողով.

const products = useSelector(selectAllProducts)

Իսկ հիմա անցնենք ProductPage.jsx ֆայլին: Այստեղ մեզ id-ով ապրանք էր պետք: Կատարենք տողի փոխարինումը (մի մոռացեք էմպորտի մասին).

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

Ստորև բերվածով.

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

Ինքնուրույն կատարեք նմանատիպ փոխարինում EditProductForm.jsx ֆայլում: Այստեղ մեզ նույնպես id-ով ապրանք է պետք:

Հիշեք, որ նման օպտիմիզացիան միայն ձեր հարմարավետության համար է, և դուք կարող եք դա անել այն ժամանակ, երբ կհամարեք անհրաժեշտ և հարմար: Իսկ մեր օրինակում պատկերացրեք, որ մենք գրեինք ընտրիչ-ֆունկցիայի կոդը ամեն անգամ տարբեր տեղերում, իսկ հետո փոխեինք ստեյտի կառուցվածքը, և այն ժամանակ պետք կլիներ այն ուղղել բոլոր կոմպոնենտներում:

Բացեք ձեր ուսանողների հավելվածը: Բացեք դրա մեջ studentsSlice.js ֆայլը: Ֆայլի ամենասկզբում գրեք և էքսպորտավորեք, ինչպես ցույց է տրված դասում, երկու ընտրիչ՝ բոլոր ուսանողներին ստանալու selectAllStudents և մեկ ուսանողին id-ով ստանալու selectStudentById համար:

Հիմա էմպորտավորեք selectAllStudents և selectStudentById ընտրիչները StudentsList.jsx, StudentPage.jsx և EditStudentForm.jsx ֆայլերում, կատարեք այդ ֆայլերում համապատասխան փոփոխություններ, ինչպես ցույց է տրված դասում: