# Добавление слайса в 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, как описано в уроке.

← →
↑