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:

products/NewProductForm.jsx<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:

products/NewProductForm.jsximport { 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:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

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

products/NewProductForm.jsxconst dispatch = useDispatch()

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

products/NewProductForm.jsximport { productAdded } from './productsSlice'

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

products/NewProductForm.jsxconst 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:

products/NewProductForm.jsxconst 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.