Redux-də action göndərmək və useDispatch hook-u

Biz Redux tətbiqi üçün demək olar ki, bütün tərkib hissələrini həyata keçirdik. Yalnız React komponentindən action göndərməni anlamaq qalır. Gəlin başlayaq.

Məhsullarla olan tətbiqimizi açın. NewProductForm komponentinin formasında bizim yeni məhsulun məlumatlarını yadda saxlayan düymə var. Gəlin ona klik işləyicisi əlavə edək. Onun üzərinə kliklədikdə onSaveProductClick işləyicisi işləsin:

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

Yeni məhsul yaradarkən bizim onun üçün yeni id ehtiyacımız olacaq. Biz onu çox tanınan nanoid kitabxanası vasitəsilə yaradacağıq. Yeri gəlmişkən, onu quraşdırmaq lazım deyil, çünki o artıq RTK paketi ilə gəlir. Gəlin nanoid-i import-a əlavə edək:

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

Həmçinin biz xatırlayırıq ki, state-i dəyişməyin yeganə yolu dispatch metodunu çağırmaq və ona action obyektini ötürməkdir. Bu metoda çatmaq üçün biz React-Redux-un useDispatch hook-unu tətbiq edəcəyik. Gəlin onu da import edək:

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

NewProductForm funksiyasının kodunda onun üçün dəyişəni dispatch lokal state-lərimiz üçün dəyişənləri təyin etdikdən dərhal sonra təyin edək:

products/NewProductForm.jsxconst dispatch = useDispatch()

Həmçinin bizim əvvəlki dərsdə əldə etdiyimiz action creator productAdded-i import etmək lazımdır:

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

İndi biz onSaveProductClick işləyici funksiyasının özünü yaza bilərik. Bunu return əmrindən əvvəl edək:

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

Funksiyanın daxilində biz dispatch-i çağırırıq, action obyektini formalaşdırırıq, onun payload xüsusiyyətinə yaradılmış id, ad, təsvir, qiymət və məhsulun miqdarı düşəcək. Bütün bu məlumatları biz lokal state-lərdən götürürük. Eyni zamanda, əvvəlcə biz şərtdə bütün sahələrin doldurulub-doldurulmadığını yoxlayırıq - yalnız bu halda dispatch-i çağırırıq. Sonda biz lokal state-ləri ilkin vəziyyətinə qaytarırıq:

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

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

İndi tətbiqimizi işə salaq, forma sahələrinə məlumat daxil edək və yadda saxla düyməsinə klik edək. Ura, səhifənin aşağısında yeni məhsul peyda oldu. Redux DevTools-u açsaq, onun içində Inspector vərəqini açsaq, görərik ki, solda @@INIT-dən əlavə bizim action products/productAdded də peyda olub. Sağ tərəfdə biz Action və State vərəqləri üzərində klikləyə bilərik, @@INIT və products/productAdded arasında keçid edə bilərik. İndi görərik ki, yeni məhsulumuz əlavə olunur. Həmçinin Action vərəqində biz createSlice vasitəsilə avtomatik yaradılmış action-u görürük (məsələn, Raw üzərində klikləyin). Ura: onu əl ilə yazmaq məcburiyyətində qalmadıq.