Додавање на уште еден слајс во 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,
  },
})