# Редьюсеры в 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.

← →
↑