Додавање још једног слајса у Redux

На претходним часовима смо интензивно радили на слајсу products за производе. У правој Redux апликацији у стању може бити много слајсова за различите сврхе. Зато ћемо у овој лекцији додати у state још један слајс за продавце, који ће заправо додавати производе у нашој апликацији.

Отворимо нашу апликацију са производима и прво што ћемо урадити је да у фолдеру parts направимо још један фолдер sellers, овде ћемо смештати сав код и компоненте који се тичу продаваца.

Сада, као и у случају са производима, хајде да креирамо слајс за продавце. За почетак у фолдеру sellers креирајмо фајл sellersSlice.js и увезимо у њега createSlice:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Настављамо са стандардним корацима. Као почетну вредност за слајс креирајмо четири продавца. Ради једноставности они ће имати два поља - id и name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Испод уз помоћ createSlice креирајмо слајс sellers, проследимо му почетну вредност. Пошто нећемо ни додавати продавце, ни ажурирати њихове податке у наставку, нека поље са редјусерима код нас за сада остане празно:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

На крају фајла не заборавимо на извоз добијеног редјусера:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Сада треба да отворимо фајл store.js у фолдеру app и увеземо добијени редјусер:

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

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

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})