Изпращане на action и хук useDispatch в Redux

Ние реализирахме почти всички компоненти за работата на Redux приложение. Остава само да разберем как да изпращаме action от React компонент. Да започваме.

Отворете нашето приложение с продукти. В формата на компонента NewProductForm имаме бутон за запазване на данните за новия продукт. Нека добавим манипулатор на клик към него. Нека при клик върху него се задейства манипулаторът onSaveProductClick:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

При създаване на нов продукт ще ни е необходим нов id за него. Ще го генерираме чрез широко известната библиотека nanoid. Между другото, не е необходимо да я инсталирате, тъй като тя вече идва с пакета RTK. Нека добавим nanoid в импорта:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

Също така помним, че единственият начин да променим state - е да извикаме метода dispatch, който се намира в store и да подадем обект action. За да достигнем до този метод, ние ще използваме React-Redux хука useDispatch. Нека го импортираме:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

В кода на функцията NewProductForm ще декларираме константа dispatch веднага след като сме декларирали константите за нашите локални състояния:

products/NewProductForm.jsxconst dispatch = useDispatch()

Също така е необходимо да импортираме action creator productAdded, който получихме в предишния урок:

products/NewProductForm.jsximport { productAdded } from './productsSlice'

Сега можем да напишем самата функция манипулатор onSaveProductClick. Нека го направим преди командата return:

products/NewProductForm.jsxconst onSaveProductClick = () => {}

Вътре във функцията извикваме dispatch, създаваме обект action, в свойството payload на който ще сложим генерирания id, име, описание, цена и количество на продукта. Всички тези данни взимаме от локалните състояния. В началото проверяваме в условие дали всички полета са попълнени - само в този случай извикваме dispatch. В края на кода на функцията връщаме локалните състояния в първоначалното им състояние:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

Сега нека стартираме нашето приложение, въведем данни в полетата на формата и натиснем бутона за запазване. Ура, в долната част на страницата се появи нов продукт. Като отворите Redux DevTools, а в него раздела Inspector, виждаме, че вляво освен @@INIT се е появил и нашият action products/productAdded. А в дясната част можем да кликваме върху разделите Action и State, превключвайки между @@INIT и products/productAdded. Сега виждаме, че новият ни продукт се добавя. Също така в раздела Action виждаме action, генериран автоматично чрез createSlice (кликнете, например, върху Raw). Ура: не беше необходимо да го пишем ръчно.