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