Адпраўка action і хук useDispatch у Redux

Мы рэалізавалі практычна ўсе складовыя для працы Redux прыкладання. Засталося толькі разбярэцца з адпраўкай action з React кампанента. Прыступім.

Адкрыйце наша прыкладанне з прадуктамі. У форме кампанента NewProductForm у нас ёсць кнопка для захавання дадзеных новага прадукту. Давайце навяжам ёй апрацоўшчык кліку. Хай па кліку на яе спрацоўвае апрацоўшчык onSaveProductClick:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Пры стварэнні новага прадукту нам спатрэбіцца для яго новы id. Мы будзем генераваць яго пры дапамозе ўсёвядомай бібліятэкі nanoid. Дарэчы, яе не трэба ўсталёўваць, паколькі яна ўжо ідзе з пакетам RTK. Дадамо nanoid у імпарт:

import { nanoid } from '@reduxjs/toolkit'

Таксама мы помнім, што адзіны спосаб змяніць state - гэта выклікаць метад dispatch, які ёсць у store і перадаць аб'ект action. Каб дабрацца да гэтага метаду, мы прымянім React-Redux хук useDispatch. Давайце імпартуем і яго:

import { useDispatch } from 'react-redux'

У кодзе функцыі NewProductForm завядзем для яго канстанту dispatch адразу пасля таго, як мы завялі канстанты для нашых лакальных стэйтаў:

const dispatch = useDispatch()

Таксама нам неабходна імпартаваць action creator productAdded, які мы атрымалі на мінулым уроку:

import { productAdded } from './productsSlice'

Цяпер мы можам напісаць самую функцыю апрацоўшчыка onSaveProductClick. Зробім гэта перад камандай return:

const onSaveProductClick = () => {}

Унутры функцыі мы выклікаем dispatch, фарміруем аб'ект action, у ўласцівасць payload якога ў нас трапяць згенераваны id, назва, апісанне, цана і колькасць прадукту. Усе гэтыя дадзеныя мы бярэм з лакальных стэйтаў. Пры гэтым у пачатку мы правяраем у ўмове ўсе лі палі запоўнены - толькі у гэтым выпадку выклікаем dispatch. У канцы кода функцыі мы вяртаем лакальныя стэйты ў першапачатковы стан:

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

Адкрыйце ваша прыкладанне са студэнтамі, а затым файл NewStudentForm.jsx, навясіце на кнопку захавання апрацоўшчык кліку.

Прапішыце ўсе неабходныя імпарты і напішыце функцыю-апрацоўшчык onSaveStudentClick, ужываючы метад dispatch як паказана ў уроку.

Запусціце прыкладанне, унясіце ў палі формы дадзеныя і націсніце на кнопку захавання. Пераканайцеся, што на старонцы ўнізе дадаўся новы студэнт.

Адкрыйце Redux DevTools і прайдзіцеся па ўкладках Action і State, пераканайцеся, што новы аб'ект са студэнтам дадаецца. Паглядзіце на аб'ект action, які ў вас згенераваўся, прышліце яго ў адказе на гэту задачу.