Додавање на уште еден слајс во 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, како што е прикажано во часот.