Редьюсеры в Redux
На прошлом уроке мы при помощи функции
createSlice создали слайс для продуктов
products и редьюсер, который будет обновлять
этот слайс, хранящийся в store. Еще раз напоминаю,
что в Redux данные стейта изменяются
при помощи редьюсеров.
Надо помнить, что на редьюсеры накладывается ряд ограничений. Редьюсер обновляет состояние только на основе полученных значений текущего стейта и объекта action, а затем решает как изменить стейт и возвращает его новое значение.
Мы знаем, что по умолчанию объекты и массивы
в JavaScript мутабельны (изменяемы). Также
мы знаем, что менять state напрямую нельзя,
в таком случае надо работать только с копиями.
Этому правилу должен подчиняться и редьюсер.
Но написание такой логики вручную может быть
довольно утомительным и сложным занятием, и
здесь на помощь приходит функция createSlice,
которая использует библиотеку
Immer,
преобразующую ваш 'мутабельный' код в
'немутабельный'. Таким образом, грешить и упрощать
жизнь можно только при использовании функций
createSlice или createReducer.
В число ограничений редьюсера входит также использование асинхронной логики, высчисление случайных значений и выполнение других "сторонних эффектов". А теперь, познакомившись с редьюсером поближе, вернемся к нашему приложению с продуктами.
В нашем приложении есть store, который
мы создали в предыдущих уроках, но пока
в нем ничего нет. Давайте откроем наш
файл store.js и добавим в него немного
кода. Для начала импортируем в него функцию
reducer для продуктов:
import productsReducer from '../parts/products/productsSlice'
Теперь в качестве редьюсера мы можем
указать импортированную функцию
productsReducer:
export default configureStore({
reducer: {
products: productsReducer
}
})
Вышеуказанной строчкой мы говорим нашему
store, что теперь при возникновении action
все данные для слайса state.products будут
обновляться редьюсером productsReducer.
Теперь вы можете запустить приложение (заметьте,
что в консоли исчезло предупреждение о
невалидном редьюсере!), открыть Redux DevTools
в браузере и полазить по его вкладкам. К примеру,
нажав на вкладку State во вкладке Inspector
мы можем видеть два наших объекта с продуктами,
которые вывелись в качестве начального значения
стейта при первом запуске приложения. На вкладке
Log monitor мы видим какие слайсы имеет в
себе глобальный стейт - это слайс products,
включающий два объекта. Также загляните на
вкладку Chart.
Откройте ваше приложение со студентами и
измените код файла store.js, как
показано в уроке.
Запустите в браузере ваше приложение и полазьте по вкладкам расширения Redux DevTools.