Redux-da action yuborish va useDispatch hook

Biz Redux ilovasi ishlashi uchun zarur bo'lgan deyarli barcha tarkibiy qismlarni amalga oshirdik. Faqat React komponentidan action yuborishni tushunish qoldi. Keling, boshlaymiz.

Mahsulotlar ilovamizni oching. NewProductForm komponenti formasida bizda yangi mahsulot ma'lumotlarini saqlash uchun tugma mavjud. Keling, unga klik handler'ini bog'laylik. Unga bosilganda onSaveProductClick handler'i ishlasin:

<button type="button" onClick={onSaveProductClick}>
	saqlash
</button>

Yangi mahsulot yaratishda biz unga yangi id kerak bo'ladi. Biz uni hammaga ma'lum bo'lgan nanoid kutubxonasi yordamida yaratamiz. Aytgancha, uni o'rnatish shart emas, chunki u allaqachon RTK to'plami bilan birga keladi. Keling, nanoid ni import qo'shamiz:

import { nanoid } from '@reduxjs/toolkit'

Shuningdek, biz eslaymizki, state ni o'zgartirishning yagona usuli - bu store da mavjud bo'lgan dispatch metodini chaqirish va unga action ob'ektini uzatish. Ushbu metodga yetib olish uchun biz React-Redux ning useDispatch hook'idan foydalanamiz. Keling, uni import qilaylik:

import { useDispatch } from 'react-redux'

NewProductForm funksiyasi kodida undan foydalanish uchun dispatch konstantasini e'lon qilaylik, mahalliy state'lar uchun konstantalarni e'lon qilganimizdan keyin darhol:

const dispatch = useDispatch()

Shuningdek, oldingi darsda olgan action creator productAdded ni import qilishimiz kerak:

import { productAdded } from './productsSlice'

Endi biz onSaveProductClick handler funksiyasining o'zini yozishimiz mumkin. Buni return dan oldin qilamiz:

const onSaveProductClick = () => {}

Funksiya ichida biz dispatch ni chaqiramiz, action ob'ektini shakllantiramiz, uning payload xususiyatiga yaratilgan id, nom, tavsif, narx va mahsulot miqdori kiradi. Biz ushbu ma'lumotlarning barchasini mahalliy state'lardan olamiz. Bunda avval shartni tekshiramiz barcha maydonlar to'ldirilganmi - faqat shu holda dispatch ni chaqiramiz. Oxirida funksiya kodi biz mahalliy state'larni dastlabki holatiga qaytaramiz:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

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

Endi ilovamizni ishga tushiramiz, forma maydonlariga ma'lumotlarni kiritamiz va saqlash tugmasini bosing. Hur, sahifaning pastki qismida yangi mahsulot paydo bo'ldi. Redux DevTools ni ochib, uning ichidagi Inspector yorlig'ini ochsak, chap tomonda @@INIT dan tashqari bizning action'imiz products/productAdded ham paydo bo'lganini ko'ramiz. O'ng qismida biz Action va State yorliqlarini bosib, @@INIT va products/productAdded o'rtasida almashtirishimiz mumkin. Endi biz yangi mahsulotimiz qo'shilayotganini ko'ramiz. Shuningdek, Action yorlig'ida biz createSlice yordamida avtomatik yaratilgan action ni ko'ramiz (masalan, Raw ustiga bosing). Hur: biz uni qo'lda yozishga majbur bo'lmadik.

Talabalar ilovangizni oching, keyin NewStudentForm.jsx faylini oching, saqlash tugmasiga klik handler'ini bog'lang.

Barcha zarur import'larni yozing va onSaveStudentClick handler funksiyasini yozing, dispatch metodidan darsda ko'rsatilgandek foydalangan holda.

Ilovani ishga tushiring, forma maydonlariga ma'lumotlarni kiriting va saqlash tugmasini bosing. Sahifaning pastki qismida yangi talaba qo'shilganligiga ishonch hosil qiling.

Redux DevTools ni oching va Action va State yorliqlari bo'yicha yuring, yangi talaba ob'ekti qo'shilayotganiga ishonch hosil qiling. Sizga yaratilgan action ob'ektiga qarang va uni ushbu vazifa javobida yuboring.