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