Redux'ta selectorlordu aluu

Кээде колдонмодо артыкча кодтон арылуу жана маалыматтарды инкапсуляциялоу абдан пайдалуу болот.

Келгиле, товарлар менен иштеген колдонмобузду ачалы. Колдонмонун бир нече жеринде биз селекторлорду колдонуп, товарлар слайсын алуу үчүн алар менен кандайдыр бир аракеттерди жасайбыз.

Эми биздин 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'tun негизги абалынын объектиси).

Ошентип биз жөн гана селектор-функциялар үчүн кодду бир жерге жылдырдык жана азыр биз аларды колдонгон жерлерде тиешелүү өзгөртүүлөрдү киргизишибиз керек. ProductsList.jsx файлынан баштайбыз. Ага selectAllProducts импорттойбуз, анткени бул жерде бизге бардык товарларды алуу керек болот:

import { selectAllProducts } from './productsSlice'

Жана ProductsList функциясынын кодунун башында, төмөнкүнү алмастырабыз:

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

Төмөнкү сап менен:

const products = useSelector(selectAllProducts)

Эми ProductPage.jsx файлына өтөлү. Бул жерде bizge 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 файлдарына импорттоп, ушул файлдарда сабакта көрсөтүлгөндөй тиешелүү өзгөртүүлөрдү киргизиңиз.