Reduxda selektorlarni olish

Ba'zan ilovadagi ortiqcha koddan xalos bo'lish va ma'lumotlarni inkapsulyatsiya qilish juda foydali bo'ladi.

Keling, mahsulotlar ilovamizni ochaylik. Diqqat qiling, ilovaning bir nechta joylarida biz selektorlardan foydalanib, mahsulotlar slaysini olib, uning bilan ba'zi amallarni bajaramiz.

Hozir esa bizning productsSlice.js faylimizni ochamiz, faylning eng oxiriga tushamiz va bir nechta qator kod qo'shamiz, unda ikkita selektor yozamiz va ularni eksport qilamiz. Bitta funktsiya barcha mahsulotlarni olish uchun bo'ladi:

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

Va undan keyin ikkinchisi - id bo'yicha bitta mahsulotni olish uchun:

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

Albatta, sizda adolatli savol paydo bo'lishi mumkin - bizda state.products.products qanday paydo bo'ldi? Javobi oddiy, o'tgan darsda biz slays tuzilishini o'zgartirdik va endi bizning mahsulotlarimiz slaysning alohida products xususiyatida massiv ko'rinishida joylashadi mahsulotlar slaysi state.products (esda tuting, bu yerda state - bu Redux holatining ildiz ob'ekti bo'lib, barcha slayslarni o'z ichiga oladi).

Shunday qilib, biz kodni oddiygina ko'chirdik selektor funktsiyalari uchun bitta joyga ilovada va endi bizga kerak kerakli o'zgartirishlarni qilish joylarda, biz ularni ishlatganmiz. Keling, fayldan boshlaymiz ProductsList.jsx. Unga import qilamiz selectAllProducts, chunki bu yerda bizga barcha mahsulotlarni olish kerak:

import { selectAllProducts } from './productsSlice'

Va ProductsList funktsiyasining kod boshida, almashtiramiz:

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

Qatorga:

const products = useSelector(selectAllProducts)

Endi esa ProductPage.jsx fayliga o'tamiz. Bu yerda bizga id bo'yicha mahsulot kerak edi. Qatorni almashtiramiz (importni unutmang):

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

Shu qatorga:

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

Shunga o'xshash o'zgartirishni EditProductForm.jsx faylida o'zingiz bajaring. Bu yerda bizga shuningdek id bo'yicha mahsulot kerak.

Esda tuting, bunday optimallashtirish faqat sizning qulayligingiz uchun va siz uni kerakli va qulay deb hisoblaganingizda bajara olasiz. Bizning misolimizda tasavvur qiling, biz selektor funktsiyasining kodini har safar turli joylarda yozgan bo'lsak, keyin esa holat tuzilishini o'zgartirgan bo'lsak, va keyin uni barcha komponentlarda tuzatish kerak bo'lardi.

Talabalar ilovangizni oching. Undagi studentsSlice.js faylini oching. Faylning eng pastki qismida yozing va eksport qiling, dersda ko'rsatilganidek, ikkita selektor barcha talabalarni olish uchun selectAllStudents va id bo'yicha bitta talabani olish uchun selectStudentById.

Endi selectAllStudents va selectStudentById ni StudentsList.jsx, StudentPage.jsx va EditStudentForm.jsx fayllariga import qiling, bu fayllarda kerakli o'zgartirishlarni kiriting, darsda ko'rsatilganidek.