Изменение структуры стейта в 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 в коде для ваших трех функций-редьюсеров.