Добавяне на още един слой в Redux

В предишните уроци ние усилено работихме върху слоя products за продукти. В едно реално Redux приложение в състоянието може да има много слоеве за различни цели. Затова в този урок ще добавим в състоянието още един слой за продавачи, които фактически ще добавят продукти в нашето приложение.

Нека отворим нашето приложение с продукти и първото нещо, което ще направим, е в папката parts да създадем още една папка sellers, тук ще разположим целия код и компоненти, свързани с продавачите.

Сега, както в случая с продуктите, нека създадем слой за продавачите. Като начало в папката sellers създаваме файл sellersSlice.js и импортираме в него createSlice:

import { createSlice } from '@reduxjs/toolkit'

Продължаваме със стандартните стъпки. Като начална стойност за слоя създаваме четирима продавачи. За простота те ще имат две полета - id и name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

По-долу с помощта на createSlice създаваме слоя sellers, подаваме му началната стойност. Тъй като няма да добавяме продавачи, нито да актуализираме техните данни в бъдеще, нека полето с редуктори засега остане празно:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

В края на файла не забравяме за експорта на получения редуктор:

export default sellersSlice.reducer

Сега трябва да отворим файла store.js в папката app и да импортираме получения редуктор:

import sellersReducer from '../parts/sellers/sellersSlice'

И след това да го назначим в configureStore като редуктор за sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Отворете вашето приложение със студенти. Създайте още една папка teachers, тук ще имате файлове с код, свързани с преподаватели. Създайте в нея файл teachersSlice.js. Използвайки материалите от урока, създайте в него слоя teachers с помощта на createSlice.

Нека всеки обект с данни на учител има три свойства: id, name (което ще съдържа фамилия и инициали, например 'Петров А.В.') и предмет (който и да е, който измислите - физика, математика, биология и т.н.). Направете 3 такива обекта с учители като начална стойност за слоя.

Импортирайте получения редуктор teachersReducer в store.js и назначете го като редуктор за teachers, както е показано в урока.