Kutuma Action na UseDispatch Hook katika Redux

Tumetekeleza karibu sehemu zote muhimu kwa kufanya kazi ya programu ya Redux. Kilichobaki ni kuelewa jinsi ya kutuma action kutoka kwenye komponenti ya React. Tuanze.

Fungua programu yetu ya bidhaa. Kwenye fomu ya komponenti NewProductForm tunayo kitufe cha kuhifadhi data ya bidhaa mpya. Wacha tuweke kisakinishi cha kubonyeza (click handler). Wakati wa kubonyeza, kisakinishi onSaveProductClick kifanye kazi:

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

Wakati wa kuunda bidhaa mpya, tutahitaji kitambulisho (id) kipya kwake. Tutakichanganua kwa kutumia maktaba inayojulikana sana nanoid. Kwa njia, hii haihitaji kusakinishwa, kwa sababu tayari inakuja na kifurushi cha RTK. Wacha tuongeze nanoid kwenye usafirishaji (import):

import { nanoid } from '@reduxjs/toolkit'

Pia tunakumbuka, kuwa njia pekee ya kubadilisha state - ni kuita njia dispatch, ambayo ipo kwenye hifadhi (store) na kupitisha kitu cha action. Kufikia njia hii, tutatumia React-Redux hook useDispatch. Wacha tusafirishe na hiyo:

import { useDispatch } from 'react-redux'

Kwenye msimbo wa kitendo NewProductForm tuanzishe kwa ajili yake mara kwa mara dispatch mara tu baada ya kuanzisha viwango (states) vya ndani:

const dispatch = useDispatch()

Pia inatuhitaji kusafirisha action creator productAdded, ambayo tulipata katika somo lililopita:

import { productAdded } from './productsSlice'

Sasa tunaweza kuandika kitendo chenyewe cha kisakinishi onSaveProductClick. Tufanye hii kabla ya amri return:

const onSaveProductClick = () => {}

Ndani ya kitendo tunaita dispatch, tunaunda kitu cha action, kwenye sifa payload ambayo itapata kitambulisho kilichotengenezwa, jina, maelezo, bei na kiasi cha bidhaa. Data hizi zote tunazichukua kutoka kwa viwango vya ndani. Wakati huo huo mwanzo tunakagua kwa masharti ikiwa sehemu zote zimejazwa - tu katika kesi hii tuite dispatch. Mwishoni wa msimbo wa kitendo tunarudisha viwango vya ndani katika hali yao ya asili:

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

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

Sasa tianzishe programu yetu, tuingize data kwenye sehemu za fomu na tubonyeze kitufe cha kuhifadhi. Huruma, chini kwenye ukurasa imeonekana bidhaa mpya. Kufungua Redux DevTools, na ndani yake kichupo cha Inspector, tunaona, kuwa kushoto badala ya @@INIT kumeonekana pia action yetu products/productAdded. Na kwenye sehemu ya kulia tunaweza kubofya kwenye vitabo vya Action na State, tukibadilisha kati ya @@INIT na products/productAdded. Sasa tunaona, kuwa bidhaa yetu mpya inaongezwa. Pia kwenye kichupo cha Action tunaona action, iliyotengenezwa moja kwa moja kwa kutumia createSlice (bofya, kwa mfano, kwenye Raw). Huruma: haikutuhitaji kuiandika kwa mikono.

Fungua programu yako ya wanafunzi, kisha faili NewStudentForm.jsx, wekea kitufe cha kuhifadhi kisakinishi cha kubonyeza.

Andika usafirishaji wote unaohitajika na andika kitendo-kisakinishi onSaveStudentClick, ukitumia njia dispatch kama inavyoonyeshwa kwenye somo.

Anzisha programu, weka data kwenye sehemu za fomu data na ubonyeze kitufe cha kuhifadhi. Hakikisha kuwa chini kwenye ukurasa kumeongezeka mwanafunzi mpya.

Fungua Redux DevTools na pitia kwenye vitabo vya Action na State, hakikisha kuwa kitu kipya na mwanafunzi kinaongezwa. Angalia kitu cha action, ambacho kimetengenezwa, kikpeleke kwenye jibu la kazi hii.