Слање 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()

Такође нам је потребно да увеземо креатор акције 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 појавила и наша акција products/productAdded. А у десном делу можемо да кликћемо по картицама Action и State, пребацујући притом између @@INIT и products/productAdded. Сада видимо да се наш нови производ додаје. Такође на картици Action видимо акцију, генерисану аутоматски помоћу createSlice (кликните, на пример, на Raw). Ура: није било потребно да га пишемо ручно.

Отворите вашу апликацију са студентима, а затим фајл NewStudentForm.jsx, додајте на дугме чувања руковаоца клика.

Напишите све потребне импорте и напишите функцију-руковалац onSaveStudentClick, примењујући метод dispatch као што је приказано на часу.

Покрените апликацију, унесите у поља форме податке и притисните на дугме чувања. Уверите се да се на страници доле додао нови студент.

Отворите Redux DevTools и прођите кроз картице Action и State, уверите се да нови објекат са студентом додаје. Погледајте објекат action-а, који вам се генерисао, пошаљите га у одговору на овај задатак.