Odosielanie action a hook useDispatch v Reduxe

Implementovali sme takmer všetky zložky pre fungovanie Redux aplikácie. Zostáva len pochopiť odosielanie action z React komponentu. Poďme na to.

Otvorte našu aplikáciu s produktmi. V forme komponentu NewProductForm máme tlačidlo na uloženie údajov nového produktu. Nastavme mu obslužnú rutinu kliku. Nech pri kliknutí naň spustí obslužnú rutinu onSaveProductClick:

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

Pri vytváraní nového produktu budeme potrebovať preň nové id. Vygenerujeme ho pomocou dobre známej knižnice nanoid. Mimochodom, nie je potrebné ju inštalovať, pretože je už súčasťou balíka RTK. Pridajme nanoid do importu:

import { nanoid } from '@reduxjs/toolkit'

Tiež pamätáme, že jediný spôsob ako zmeniť state - je zavolať metódu dispatch, ktorú má store a odovzdať objekt action. Aby sme sa dostali k tejto metóde, použijeme React-Redux hook useDispatch. Importujme ho:

import { useDispatch } from 'react-redux'

V kóde funkcie NewProductForm vytvorme preň konštantu dispatch hneď po tom, ako sme vytvorili konštanty pre naše lokálne stavy:

const dispatch = useDispatch()

Tiež musíme importovať action creator productAdded, ktorý sme získali v predchádzajúcej lekcii:

import { productAdded } from './productsSlice'

Teraz môžeme napísať samotnú funkciu obslužnej rutiny onSaveProductClick. Urobme to pred príkazom return:

const onSaveProductClick = () => {}

Vo vnútri funkcie voláme dispatch, tvoríme objekt action, do vlastnosti payload ktorého sa dostane vygenerované id, názov, popis, cena a množstvo produktu. Všetky tieto údaje berieme z lokálnych stavov. Pritom na začiatku kontrolujeme v podmienke, či sú všetky polia vyplnené - len v tomto prípade voláme dispatch. Na konci kódu funkcie vrátime lokálne stavy do pôvodného stavu:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

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

Teraz spustíme našu aplikáciu, zadáme údaje do polí formulára a stlačíme tlačidlo uloženia. Hurá, dole na stránke sa objavil nový produkt. Otvorením Redux DevTools, a v nich karty Inspector, vidíme, že vľavo okrem @@INIT pribudla aj naša action products/productAdded. A v pravej časti môžeme kliknúť na karty Action a State, pričom prepínať medzi @@INIT a products/productAdded. Teraz vidíme, že sa náš nový produkt pridáva. Tiež na karte Action vidíme action, vygenerovaný automaticky pomocou createSlice (kliknite napríklad na Raw). Hurá: nemuseli sme ho zapisovať ručne.

Otvorte vašu aplikáciu so študentmi, a potom súbor NewStudentForm.jsx, nastavte na tlačidlo uloženia obslužnú rutinu kliku.

Napíšte všetky potrebné importy a napíšte funkciu-obslužnú rutinu onSaveStudentClick, aplikujte metódu dispatch ako je ukázané v lekcii.

Spustite aplikáciu, zadajte do polí formulára údaje a stlačte tlačidlo uloženia. Presvedčte sa, že na stránke dole pribudol nový študent.

Otvorte Redux DevTools a prejdite kartami Action a State, presvedčte sa, že nový objekt so študentom sa pridáva. Pozrite sa na objekt action, ktorý sa vám vygeneroval, pošlite ho v odpovedi na túto úlohu.