Дадаванне яшчэ аднаго слайса ў Redux

На мінулых занятках мы шчыльна папрацавалі над слайсам products для прадуктаў. У рэальным Redux прыкладанні ў стэйце можа быць шмат слайсаў для розных мэт. Таму на гэтым уроке мы дададзім у state яшчэ адзін слайс для прадаўцоў, якія фактычна і будуць дадаваць прадукты ў нашым прыкладанні.

Адкрыем наша прыкладанне з прадуктамі і першае, што мы зробім, гэта ў папцы 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, як паказана ў уроку.