Добавление еще одного слайса в 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,
  },
})