Дадаванне яшчэ аднаго слайса ў 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,
  },
})