Получаване на селектори в 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, внесете в тези файлове съответните промени, както е показано в урока.