action-ის გაგზავნა და useDispatch ჰუკი Redux-ში

ჩვენ უკვე გავაკეთეთ თითქმის ყველა საჭირო ნაწილი Redux აპლიკაციის მუშაობისთვის. დარჩა მხოლოდ ის, რომ გავიგოთ, როგორ გავგზავნოთ action React კომპონენტიდან. დავიწყოთ.

გახსენით ჩვენი პროდუქტების აპლიკაცია. კომპონენტ NewProductForm-ის ფორმაში გვაქვს ღილაკი ახალი პროდუქტის მონაცემების შესანახად. მოდით, მივაბათ მას კლიკის ქოლბეკი. დავუშვათ, რომ მასზე დაწკაპუნებისას გაეშვას ქოლბეკი onSaveProductClick:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  შენახვა
</button>

ახალი პროდუქტის შექმნისას დაგვჭირდება მისთვის ახალი id. ჩვენ მას შევქმნით ყველასთვის ცნობილი ბიბლიოთეკის nanoid-ის დახმარებით. სხვათაშორის, მისი დაყენება არ არის საჭირო, რადგან ის უკვე მოდის RTK პაკეტთან ერთად. დავამატოთ nanoid იმპორტში:

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

ასევე გვახსოვს, რომ state-ის შეცვლის ერთადერთი გზა - ეს არის მეთოდი dispatch-ის გამოძახება, რომელიც აქვს store-ს და action-ის ობიექტის გადაცემა. იმისათვის, რომ მივწვდეთ ამ მეთოდს, ჩვენ გამოვიყენებთ React-Redux ჰუკს useDispatch. მოდით, იმპორტირება გავუკეთოთ მას:

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

ფუნქცია NewProductForm-ის კოდში შევქმნათ მისთვის კონსტანტა dispatch მას შემდეგ, რაც ჩვენ შევქმენით კონსტანტები ჩვენი ლოკალური state-ებისთვის:

products/NewProductForm.jsxconst dispatch = useDispatch()

ასევე ჩვენ უნდა იმპორტირება გავუკეთოთ action creator-ს productAdded, რომელიც ჩვენ მივიღეთ წინა გაკვეთილზე:

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

ახლა ჩვენ შეგვიძლია დავწეროთ თავად ფუნქცია ქოლბეკი onSaveProductClick. გავაკეთოთ ეს ბრძანება return-ის წინ:

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

ფუნქციის შიგნით ჩვენ ვიძახებთ dispatch-ს, ვქმნით action-ის ობიექტს, ველში payload ჩვენ მოხვდება შექმნილი id, სახელი, აღწერა, ფასი და რაოდენობა პროდუქტის. ყველა ამ მონაცემს ჩვენ ვიღებთ ლოკალური state-ებიდან. ამ შემთხვევაში დასაწყისში ჩვენ ვამოწმებთ პირობაში არის თუ არა ყველა ველი შევსებული - მხოლოდ ამ შემთხვევაში ვიძახებთ dispatch-ს. ბოლოს ფუნქციის კოდში ჩვენ ვაბრუნებთ ლოკალურ state-ებს საწყის მდგომარეობაში:

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

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

ახლა ჩავუშვათ ჩვენი აპლიკაცია, შევიყვანოთ მონაცემები ველებში და დავაწკაპუნოთ ღილაკზე შენახვა. ჰურა, ქვევა გვერდზე გამოჩნდა ახალი პროდუქტი. Redux DevTools-ის გახსნისას, და მასში Inspector-ის ჩანართის, ჩვენ ვხედავთ, რომ მარცხნივ @@INIT-ის გარდა გაჩნდა ჩვენი action products/productAdded. ხოლო მარჯვენა ნაწილში ჩვენ შეგვიძლია დავაწკაპუნოთ Action და State ჩანართებს, გადავრთოთ @@INIT და products/productAdded. ახლა ჩვენ ვხედავთ, რომ ჩვენი ახალი პროდუქტი ემატება. ასევე Action ჩანართზე ჩვენ ვხედავთ action-ს, რომელიც ავტომატურად შეიქმნა createSlice-ის დახმარებით (დააწკაპუნეთ, მაგალითად, Raw-ზე). ჰურა: ჩვენ არ დაგვჭირდა მისი ხელით დაწერა.