Добавление еще одного слайса в 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, как показано в уроке.