Добавление слайса в Redux
Мы подготовили основные инструменты для создания нашего Redux приложения, теперь мы можем перейти непосредственно к реализации его компонентов.
На этом занятии мы начнем с понятия слайсов (англ. slices - ломтики, части). Redux приложение имеет один глобальный стейт, который хранится в store. Этот стейт расщепляется на слайсы. Фактически, слайс - это кусочек хранилища, содержащий исходный стейт, логику редьюсера и экшенов для определенной части приложения.
В нашем приложении будут фигурировать продукты, соответственно первый слайс, который мы сделаем, будет содержать информацию о продуктах. Также при создании слайса необходимо добавить редьюсер, который знает, как обрабатывать эту информацию.
Давайте зайдем в папку src и создадим
папку parts, а затем в ней папку
products - сюда мы будем складывать
все файлы с кодом, относящимся к продуктам. В
папке products мы создадим файл
productsSlice.js, а затем импортируем
в него из RTK функцию createSlice, с помощью
которой мы и будем создавать слайсы:
import { createSlice } from '@reduxjs/toolkit'
Теперь давайте создадим слайс для продуктов
и назовем его 'products'. Для
свойства reducers мы пока оставим
пустые фигурные скобки:
const productsSlice = createSlice({
name: 'products',
initialState,
reducers: {}
})
Также нам необходимо определить
initialState - начальное состояние слайса
стейта, которое будет загружено при первом
запуске приложения. Напишем его сразу
после импорта и перед созданием слайса.
Пусть это будет массив из пары
объектов, содержащих данные продуктов.
Укажем для каждого продукта id,
название, описание, цену и количество:
const initialState = [
{
id: '1',
title: 'Product1',
desc: 'This is an amazing product',
price: '300',
amount: '30',
},
{
id: '2',
title: 'Product2',
desc: 'This is a nice product',
price: '700',
amount: '12',
},
]
В конце кода файла мы из результата работы функции
createSlice возьмем сгенерированный ею
reducer и экспортируем его. Он пригодится
нам в других файлах приложения:
export default productsSlice.reducer
Откройте ваше приложение для студентов.
Создайте в нем файл studentsSlice.js,
как описано в уроке. Создайте в нем при
помощи createSlice слайс students. В
качестве начального значения слайса пусть у
вас будет массив из пары объектов, содержащих
данные студентов.
Для каждого студента сделайте поля: id,
имя, фамилия, возраст и специальность.
В конце файла studentsSlice.js
экспортируйте полученный reducer, как
описано в уроке.