Редьюсер и action в Redux
На прошлом уроке мы закончили форму для добавления продукта и выведи ее на главной странице. Но пока добавленные данные не сохраняются, другими словами новый продукт не добавляется к существующим в store. Давайте это исправим.
Для начала в нашем приложении с продуктами
мы откроем файл productsSlice.jsx и напишем в
свойстве reducer для createSlice функцию
productAdded, которая будет заниматься
добавлением продукта в store на основе
переданных ей текущего стейта и экшена.
Нужно отметить, что здесь нам передается
не весь state, а только та его часть, которая
отвечает за продукты (слайс products знает
только о ней). Объект с новым продуктом
будет находится в свойстве payload объекта
action, который будет генерироваться
обработчиком при нажатии кнопки сохранения
в форме. В результате редьюсер productAdded
будет выглядеть в коде createSlice так:
const productsSlice = createSlice({
name: 'products',
initialState,
reducers: {
productAdded(state, action) {
state.push(action.payload)
},
},
})
А как насчет action? В самом начале учебника мы упоминали о том, что action - это некоторое событие, представленное в виде объекта, описывающее то, что произошло в приложении. Говорили мы и о том, что можно использовать функцию action creator, которая будет нам создавать такой объект, к примеру так:
const addProduct = newProduct => {
return {
type: 'products/productAdded',
payload: newProduct
}
}
Хорошая новость в том, что нам не нужно ничего
делать, а это за нас сделает функция createSlice,
которую мы используем. Как только мы написали
reducer, она автоматически создаст за нас action
creator с таким же именем. Нам только
остается экспортировать полученный action
creator для дальнейшего применения в
компонентах. Сделаем это в конце файла
перед экспортом редьюсера, вот так:
export const { productAdded } = productsSlice.actions
export default productsSlice.reducer
Откройте ваше приложение со студентами,
а затем файл studentsSlice.jsx, допишите
значение поля reducer для createSlice,
как показано в уроке.
Добавьте в конец файла studentsSlice.jsx
экспорт полученной функции action creator.