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 слайсларини ўз ичига олган ‌Redux state-ининг асосий объекти).

‌Шу тариқа биз селектор функциялари учун кодни ‌илованинг бир жойига кўчирдик ва энди биз улар ‌ишлатилган жойларда мос ўзгартиришлар киритишимиз ‌керак. 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 бўйича махсулот керак.

‌Эсланг, бундай оптимизация фақат сизнинг қулайлигингиз учун ‌ва сиз уни ўзингиз керак ва қулай деб ҳисоблаган пайтингизда бажара оласиз. ‌Бизнинг мисолимизда тасаввур қилинг, биз селектор функциясининг кодини ‌ҳар хил жойларда такрор ёзаверардик, кейин state-нинг тузилиши ўзгарганида, ‌уни барча компонентларда тузатишга тўғри келарди.

‌Сизнинг талабалар билан иловангизни очинг. ‌Ундаги studentsSlice.js файлини очинк. ‌Файлнинг энг pastki кисмида дарсда кўрсатилганидек, иккита селектор ёзинг ва экспорт қилинг: ‌барча талабаларни олиш учун selectAllStudents ва ‌бир талабани id бўйича олиш учун selectStudentById.

‌Энди selectAllStudents ва ‌selectStudentById ни StudentsList.jsx, ‌StudentPage.jsx ва EditStudentForm.jsx файлларига импорт қилинг, ‌ушбу файлларда дарсда кўрсатилганидек мос ўзгартиришлар киритинг.