# Получение селекторов в 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`, внесите в этих файлах соответствующие изменения, как показано в уроке.

← →
↑