Odesílání action a hook useDispatch v Redux

Implementovali jsme téměř všechny součásti pro fungování Redux aplikace. Zbývá jen vysvětlit odesílání action z React komponenty. Pojďme na to.

Otevřete naši aplikaci s produkty. V formuláři komponenty NewProductForm máme tlačítko pro uložení dat nového produktu. Pojďme na něj navázat obslužnou rutinu kliku. Ať po kliknutí na něj spustí obslužnou rutinu onSaveProductClick:

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

Při vytváření nového produktu budeme potřebovat pro něj nové id. Vygenerujeme jej pomocí všeobecně známé knihovny nanoid. Mimochodem, není třeba ji instalovat, protože ji již obsahuje balíček RTK. Přidejme nanoid do importu:

import { nanoid } from '@reduxjs/toolkit'

Také si pamatujeme, že jediný způsob jak změnit state - je zavolat metodu dispatch, kterou má store a předat jí objekt action. Abyste se k této metodě dostali, použijeme React-Redux hook useDispatch. Pojďme jej importovat:

import { useDispatch } from 'react-redux'

V kódu funkce NewProductForm si vytvoříme pro něj konstantu dispatch hned poté, co jsme si vytvořili konstanty pro naše lokální stavy:

const dispatch = useDispatch()

Také potřebujeme importovat action creator productAdded, který jsme získali v minulé lekci:

import { productAdded } from './productsSlice'

Nyní můžeme napsat samotnou funkci obslužné rutiny onSaveProductClick. Udělejme to před příkazem return:

const onSaveProductClick = () => {}

Uvnitř funkce voláme dispatch, vytvoříme objekt action, do vlastnosti payload kterého vložíme vygenerované id, název, popis, cenu a množství produktu. Všechna tato data bereme z lokálních stavů. Zároveň na začátku kontrolujeme v podmínce, zda jsou všechna pole vyplněna - pouze v tomto případě voláme dispatch. Na konci kódu funkce vracíme lokální 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)
	}
}

Nyní spusťte naši aplikaci, zadejte data do polí formuláře a klikněte na tlačítko uložení. Hurá, dole na stránce se objevil nový produkt. Otevřete Redux DevTools, a v něm záložku Inspector, vidíme, že vlevo kromě @@INIT se objevila i naše action products/productAdded. A v pravé části můžeme klikat na záložky Action a State, přičemž přepínat mezi @@INIT a products/productAdded. Nyní vidíme, že se náš nový produkt přidává. Také na záložce Action vidíme action, vygenerovaný automaticky pomocí createSlice (klikněte například na Raw). Hurá: nemuseli jsme jej psát ručně.

Otevřete vaši aplikaci se studenty, a poté soubor NewStudentForm.jsx, navážte na tlačítko uložení obslužnou rutinu kliku.

Napište všechny potřebné importy a napište funkci-obslužnou rutinu onSaveStudentClick, použijte metodu dispatch jak je ukázáno v lekci.

Spusťte aplikaci, zadejte do polí formuláře data a klikněte na tlačítko uložení. Přesvědčte se, že na stránce dole přibyl nový student.

Otevřete Redux DevTools a projděte záložky Action a State, přesvědčte se, že nový objekt se studentem se přidává. Podívejte se na objekt action, který se vám vygeneroval, pošlete jej v odpovědi na tento úkol.