# Изменение структуры стейта в Redux

Первый этап, который мы будем реализовывать для взаимодействии нашего Redux приложения с каким-то внешним сервером - это получение данных, которые на нем хранятся при запуске приложения. Но прежде давайте внесем в наше приложение некоторые изменения.

Откроем наше приложение с продуктами, а в нем файл `productsSlice.js`. Обратите внимание на определение `initialState`. Изначально наш слайс с продуктами `productsSlice` - это массив, в котором имеются объекты (в нашем случае их два) с данными продуктов. Во-первых, так как теперь мы будем загружать их с сервера, то нам нужно убрать их из `initialState`. Во-вторых, мы будем посылать на сервер API запросы и нам будет важно знать об их статусе. Учитывая эти две вещи, давайте переделаем `initialState`. Пусть теперь это будет просто объект с полями `products` (изначально здесь не будет никаких данных, а просто пустой массив), `status` и `error`. Теперь наш код для `initialState` станет немного короче:

`const initialState = { products: [], status: 'idle', error: null, }`

Пока мы выставили статус `'idle'` (бездействие), ведь первоначально мы не отправляем никаких запросов, а вообще он будет меняться и может принимать значения `'загрузка'`, `'выполнен'`, `'ошибка загрузки'`. Помните, что для обозначения статуса вы можете выбрать те имена, которые будут удобны вам.

Спускаемся ниже по коду. Следом за изменением `initialState`, нам следует поменять и код, в котором мы работаем с этим стейтом в функциях-редьюсерах. Посмотрим на код для `productAdded`:

`state.push(action.payload)`

Теперь новые продукты мы будем складывать не просто в state для продуктов, а в его свойство `state.products`. Поэтому, заменим вышеуказанную строку на:

`state.products.push(action.payload)`

Соответственно, проделаем те же изменения для редьюсера `reactionClicked`. Вместо:

`const currentProduct = state.find((product) => product.id === productId)`

Теперь будет:

`const currentProduct = state.products.find((product) => product.id === productId)`

Замените сами `state` на `state.products` и в коде редьюсера `productUpdated`.

Откройте ваше приложение со студентами. Откройте в нем файл `studentsSlice.js`. Пусть теперь ваш `initialState` имеет три свойства: `students`, `status`, `error` - переделайте его, как показано в уроке.

Внесите соответствующие изменения и ниже по коду. Замените `state` на `state.students` в коде для ваших трех функций-редьюсеров.

← →
↑