Trimiterea acțiunilor și hook-ul useDispatch în Redux

Am implementat aproape toate componentele necesare pentru funcționarea unei aplicații Redux. Rămâne doar să înțelegem cum să trimitem o acțiune dintr-un component React. Să începem.

Deschideți aplicația noastră cu produse. În forma componentului NewProductForm avem un buton pentru salvarea datelor noului produs. Să adăugăm un handler pentru click. Să declanșăm handler-ul onSaveProductClick la click pe el:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

Pentru crearea unui produs nou, vom avea nevoie de un nou id. Îl vom genera folosind binecunoscuta bibliotecă nanoid. Apropo, nu trebuie să o instalați, deoarece deja este inclusă în pachetul RTK. Să adăugăm nanoid în import:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

De asemenea, ne amintim că singura modalitate de a modifica state-ul este să apelăm metoda dispatch, care este disponibilă în store și să îi transmitem un obiect action. Pentru a accesa această metodă, vom folosi hook-ul React-Redux useDispatch. Să îl importăm:

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

În codul funcției NewProductForm, să definim o constantă dispatch imediat după ce am definit constantele pentru state-urile noastre locale:

products/NewProductForm.jsxconst dispatch = useDispatch()

De asemenea, trebuie să importăm action creator-ul productAdded, pe care l-am obținut în lecția precedentă:

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

Acum putem scrie funcția handler onSaveProductClick. Să o facem înainte de comanda return:

products/NewProductForm.jsxconst onSaveProductClick = () => {}

În interiorul funcției, apelăm dispatch, formăm obiectul action, în proprietatea payload al căruia vor intra id-ul generat, numele, descrierea, prețul și cantitatea produsului. Toate aceste date le luăm din state-urile locale. În același timp, la început verificăm într-o condiție dacă toate câmpurile sunt completate - doar în acest caz apelăm dispatch. La sfârșitul codului funcției, returnăm state-urile locale la starea inițială:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

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

Acum să pornim aplicația, să introducem date în câmpurile formularului și să apăsăm butonul de salvare. Ura, în partea de jos a paginii a apărut un produs nou. Deschizând Redux DevTools, și în el fila Inspector, vedem că în stânga în afară de @@INIT a apărut și acțiunea noastră products/productAdded. În partea dreaptă putem da click pe filele Action și State, comutând între @@INIT și products/productAdded. Acum vedem că noul nostru produs se adaugă. De asemenea, în fila Action vedem acțiunea, generată automat cu createSlice (dați click, de exemplu, pe Raw). Ura: nu a trebuit să o scriem manual.