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