Redux-däki action ibermek we useDispatch hook

Biz Redux aplikasiýasynyň işlemegi üçin zerur bolan ähli bölekleri döretdik. Indi diňe React komponentinden action ibermegi düşünmek galdy. Başlalyň.

Önümçilik programmanyzy açyň. NewProductForm komponentiniň formasynyň içinde täze önümiň maglumatlaryny saklamak üçin düwmämiz bar. Geliň oňa klik işleýjini birleşdireliň. Oňa klik edilende onSaveProductClick işleýjisi işlesin:

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

Täze önüm döredilende biz oňa täze id gerek bolar. Biz ony her kes tarapyndan tanylan nanoid kitaphanasy ýardymy bilen dörederis. Bu ýerde, ony gurnamaly däl, sebäbi RTK toplumy bilen gelýär. Nanoid-i importa goşalyň:

import { nanoid } from '@reduxjs/toolkit'

Şeýle hem, biz ýadymyzda saklaýarys, ýeke-täk ýagdaýy üýtgetmek usuly - bu dispatch metodu, store-da bar we onuň action obyektini geçirmek. Bu usula ýetmek üçin, biz React-Redux hook-y useDispatch ulanarys. Geliň ony hem import edeliň:

import { useDispatch } from 'react-redux'

NewProductForm funksiýasynyň kodunda onun üçin dispatch üýtgeýän sanyny kesgitläris, öz ýerli ýagdaýlarymyz üçin üýtgeýän sanlary kesgitledikden soň:

const dispatch = useDispatch()

Şeýle hem biz üçin zerur action döredijisi productAdded, öňki sapakda alan:

import { productAdded } from './productsSlice'

Indi biz onSaveProductClick işleýji funksiýasyny ýaza bileris. Muny return buýrugyndan öň edeliň:

const onSaveProductClick = () => {}

Funksiýanyň içinde biz dispatch-i çağyrýarys, action obýektini düzýäris, onuň payload aýratynlygynda biz döredilen id, at, düşündiriş, baha we san önüm bolup biler. Bu maglumatlaryň hemmesini ýerli ýagdaýlardan alýarys. Şol bir wagtyň özünde başynda biz şertde ähli meýdançalar doldurylandygyny barlayarys - diňe şonda dispatch-i çağyrýarys. Iň soňunda funksiýanyň kody biz ýerli ýagdaýlary başlangyç ýagdaýyna gaýdaryp berýäris:

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

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

Indi programmany işledeliň, forma meýdançalaryna maglumatlary giriziň we saklamak düwmesine basyň. Hore, aşakda sahypada täze önüm peýda boldy. Redux DevTools açalyň, onda Inspector goşmagynda görýäris, çep tarapda @@INIT-den başga-da bizim action products/productAdded peýda boldy. Sag tarapda biz Action we State goşmagyna basyp bilýäris, şol bir wagtyň özünde @@INIT we products/productAdded arasynda geçiş edip bilýäris. Indi görýäris, täze önümimiz goşulýar. Şeýle hem Action goşmagynda biz createSlice arkaly awtomatik döredilen action-y görýäris (meselem, Raw-a basyň). Hore: biz ony el bilen ýazmaly bolmadyk.

Talyp programmanyzy açyň, soňra NewStudentForm.jsx faýlyny açyň, saklamak düwmesine klik işleýjini birleşdiriň.

Zerur bolan ähli importlary ýazyň we onSaveStudentClick işleýji funksiýasyny ýazyň, dispatch usulyny sapakda görkezilişi ýaly ulanmak.

Programmany işlediň, forma meýdançalaryna maglumatlary giriziň we saklamak düwmesine basyň. Aşakdaky sahypada täze talyp goşulandygyna göz ýetiriň.

Redux DevTools açyň we Action we State goşmagyndan geçiň, täze talyp bilen obýekt goşulandygyna göz ýetiriň. Siziň döredilen action obýektiňize serediň, oňa bu wezipä jogap hökmünde iberiň.