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

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

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

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

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

import { nanoid } from '@reduxjs/toolkit'

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

import { useDispatch } from 'react-redux'

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

const dispatch = useDispatch()

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

import { productAdded } from './productsSlice'

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

const onSaveProductClick = () => {}

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

const 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-ზე). ჰურა: ჩვენ არ დაგვჭირდა მისი ხელით დაწერა.

გახსენით თქვენი სტუდენტების აპლიკაცია, შემდეგ კი ფაილი NewStudentForm.jsx, მიაბეთ ღილაკ შენახვას კლიკის ქოლბეკი.

დაწერეთ ყველა საჭირო იმპორტი და დაწერეთ ფუნქცია-ქოლბეკი onSaveStudentClick, გამოიყენეთ მეთოდი dispatch როგორც ეს ნაჩვენებია გაკვეთილზე.

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

გახსენით Redux DevTools და გადახედეთ ჩანართებს Action და State, დარწმუნდით, რომ ახალი ობიექტი სტუდენტით ემატება. შეხედეთ action-ის ობიექტს, რომელიც თქვენ შეიქმნა, გამოაგზავნეთ იგი ამ ამოცანის პასუხში.