Actionin lähettäminen ja useDispatch-koukku Reduxissa

Olemme toteuttaneet melkein kaikki Redux-sovelluksen toiminnan osat. Vielä on selvitettävä actionin lähettämisestä React-komponentista. Aloitetaan.

Avaa tuotesovelluksemme. Komponentin NewProductForm lomakkeessa meillä on tallenna-painike uuden tuotteen tiedoille. Lisätään sille klikinkäsittelijä. Kun sitä klikataan, suoritetaan käsittelijä onSaveProductClick:

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

Uuden tuotteen luomiseen tarvitsemme sille uuden id:n. Luomme sen käyttämällä kaikkialla tunnettua nanoid-kirjastoa. Muuten, sitä ei tarvitse asentaa erikseen, koska se tulee mukana RTK-paketissa. Lisätään nanoid import-lauseeseen:

import { nanoid } from '@reduxjs/toolkit'

Muistamme myös, että ainoa tapa muuttaa statea on kutsua storen metodia dispatch ja antaa sille action-olio. Päästäksemme käsiksi tähän metodiin, me käytämme React-Redux -koukku useDispatch. Importoidaan se:

import { useDispatch } from 'react-redux'

Komponentin NewProductForm funktiokoodissa luodaan sille vakio dispatch heti sen jälkeen, kun olemme luoneet vakiot paikallisille stateille:

const dispatch = useDispatch()

Meidän on myös tuotava action creator productAdded, jonka saimme edellisellä oppitunnilla:

import { productAdded } from './productsSlice'

Nyt voimme kirjoittaa itse käsittelijäfunktion onSaveProductClick. Tehdään se ennen return-komentoa:

const onSaveProductClick = () => {}

Funktion sisällä kutsumme dispatch:ia, muodostamme action-olion, jonka ominaisuuteen payload tulee luotu id, nimi, kuvaus, hinta ja tuotteen määrä. Kaikki nämä tiedot otamme paikallisista stateista. Samalla tarkistamme aluksi ehdossa, onko kaikki kentät täytetty - vain tässä tapauksessa kutsumme dispatch:ia. Lopussa palautamme paikalliset statet alkuperäiseen tilaan:

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

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

Käynnistetään nyt sovelluksemme, syötetään tiedot lomakkeen kenttiin ja painetaan tallenna-painiketta. Hurraa, sivun alaosaan ilmestyi uusi tuote. Avatessa Redux DevToolsin, ja sieltä Inspector-välilehden, näemme, että vasemmalla @@INIT:n lisäksi on myös actionimme products/productAdded. Oikealla puolella voimme klikata Action ja State -välilehtiä, vaihtaen samalla @@INIT ja products/productAdded:n välillä. Nyt näemme, että uusi tuotemme lisätään. Myös Action-välilehdellä näemme actionin, joka on luotu automaattisesti createSlice:n avulla (klikkaa esimerkiksi Raw). Hurraa: meidän ei tarvinnut kirjoittaa sitä käsin.

Avaa opiskelijasovelluksesi, ja sitten tiedosto NewStudentForm.jsx, lisää tallenna-painikkeelle klikinkäsittelijä.

Kirjoita kaikki tarvittavat importit ja kirjoita käsittelijäfunktio onSaveStudentClick, käyttäen metodia dispatch kuten oppitunnilla näytettiin.

Käynnistä sovellus, syötä lomakkeen kenttiin tiedot ja paina tallenna-painiketta. Varmista, että sivun alaosaan lisättiin uusi opiskelija.

Avaa Redux DevTools ja selaa Action ja State -välilehtiä, varmista, että uusi opiskelijaolio lisätään. Katso action-olio, joka sinulle generoitui, ja lähetä se vastauksessa tähän tehtävään.