Добијање селектора у 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, унесите у тим фајловима одговарајуће измене, како је показано на часу.