Адпраўка 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). Ура: нам не прыйшлося прапісваць яго ўручную.