Редьюсер и action в Redux

На прошлом уроке мы закончили форму для добавления продукта и вывели ее на главной странице. Но пока добавленные данные не сохраняются, другими словами новый продукт не добавляется к существующим в store. Давайте это исправим.

Для начала в нашем приложении с продуктами мы откроем файл productsSlice.jsx и напишем в свойстве reducer для createSlice функцию productAdded, которая будет заниматься добавлением продукта в store на основе переданных ей текущего стейта и экшена. Нужно отметить, что здесь нам передается не весь state, а только та его часть, которая отвечает за продукты (слайс products знает только о ней). Объект с новым продуктом будет находится в свойстве payload объекта action, который будет генерироваться обработчиком при нажатии кнопки сохранения в форме. В результате редьюсер productAdded будет выглядеть в коде createSlice так:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

А как насчет action? В самом начале учебника мы упоминали о том, что action - это некоторое событие, представленное в виде объекта, описывающее то, что произошло в приложении. Говорили мы и о том, что можно использовать функцию action creator, которая будет нам создавать такой объект, к примеру так:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

Хорошая новость в том, что нам не нужно ничего делать, а это за нас сделает функция createSlice, которую мы используем. Как только мы написали reducer, она автоматически создаст за нас action creator с таким же именем. Нам только остается экспортировать полученный action creator для дальнейшего применения в компонентах. Сделаем это в конце файла перед экспортом редьюсера, вот так:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer