Добивање на селектори во 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.

Запомнете, дека ваквата оптимизација е само за ваша погодност и вие можете да ја направите тогаш, кога ќе сметате дека е потребна и погодна. А на нашиот пример замислете дека ние би го пишувале кодот на функцијата-селектор секој пат на различни места, а потоа би ја смениле структурата на state-от, и тогаш би требало да го поправиме во сите компоненти.

Отворете ја вашата апликација со студенти. Отворете во неа датотеката studentsSlice.js. На самото дно на датотеката напишете и експортирајте, како што е прикажано во лекцијата, два селектори за добивање на сите студенти selectAllStudents и за добивање на еден студент по id selectStudentById.

Сега импортирајте ги selectAllStudents и selectStudentById во датотеките StudentsList.jsx, StudentPage.jsx и EditStudentForm.jsx, внесете во овие датотеки соодветни промени, како што е прикажано во лекцијата.