Action siuntimas ir useDispatch kabliukas Redux

Mes įgyvendinome beveik visas reikalingas Redux aplikacijos dalis. Belieka tik išsiaiškinti, kaip siųsti action iš React komponento. Pradėkime.

Atidarykite mūsų produktų aplikaciją. Formos komponente NewProductForm mes turime mygtuką naujo produkto duomenims išsaugoti. Uždėkime jam paspaudimo apdorotoją. Paspaudus ant jo, turi būti iškviestas apdorotojas onSaveProductClick:

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

Kuriant naują produktą, mums reikės jam naujo id. Jį sugeneruosime naudodami visiems žinomą biblioteką nanoid. Beje, jos diegti nereikia, nes ji jau ateina su RTK paketu. Pridėkime nanoid prie importo:

import { nanoid } from '@reduxjs/toolkit'

Taip pat prisimename, kad vienintelis būdas pakeisti state - tai iškviesti metodą dispatch, kuris yra store'e ir perduoti action objektą. Kad pasiektume šį metodą, mes panaudosime React-Redux kablį useDispatch. Importuokime jį:

import { useDispatch } from 'react-redux'

Funkcijos NewProductForm kode aprašykime jai konstantą dispatch iškart po to, kai aprašėme konstantas savo lokaliems state'ams:

const dispatch = useDispatch()

Taip pat mums reikia importuoti action creator'į productAdded, kurį gavome praeitoje pamokoje:

import { productAdded } from './productsSlice'

Dabar galime parašyti pačią funkciją apdorotoją onSaveProductClick. Padarykime tai prieš komandą return:

const onSaveProductClick = () => {}

Funkcijos viduje iškviečiame dispatch, formuojame action objektą, į savybę payload pateks sugeneruotas id, pavadinimas, aprašas, kaina ir kiekis produkto. Visus šiuos duomenis paimame iš lokalių state'ų. Tuo pat metu pradžioje patikriname sąlygoje, ar visi laukai užpildyti - tik tokiu atveju kviečiame dispatch. Pabaigoje funkcijos kodo grąžiname lokaliuosius state'us į pradinę būseną:

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

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

Dabar paleiskime mūsų aplikaciją, įveskime duomenis į formos laukus ir paspauskime mygtuką išsaugojimo. Valio, apačioje puslapio pasirodė naujas produktas. Atidarę Redux DevTools, o jame skirtuką Inspector, matome, kad kairėje pusėje, be @@INIT, atsirado ir mūsų action products/productAdded. Dešinėje dalyje galime spustelėti skirtukus Action ir State, perjungdami tuo pat metu @@INIT ir products/productAdded. Dabar matome, kad mūsų naujas produktas pridedamas. Taip pat skirtuke Action matome action, automatiškai sugeneruotą naudojant createSlice (spustelėkite, pavyzdžiui, ant Raw). Valio: nereikėjo jo rašyti rankiniu būdu.

Atidarykite savo studentų aplikaciją, o tada failą NewStudentForm.jsx, uždėkite ant išsaugojimo mygtuko paspaudimo apdorotoją.

Parašykite visus reikalingus importus ir parašykite funkciją-apdorotoją onSaveStudentClick, taikydami metodą dispatch kaip parodyta pamokoje.

Paleiskite aplikaciją, įveskite į formos laukus duomenis ir paspauskite ant išsaugojimo mygtuko. Įsitikinkite, kad puslapio apačioje pridėjo naujas studentas.

Atidarykite Redux DevTools ir pereikite per skirtukus Action ir State, įsitikinkite, kad naujas studento objektas pridedamas. Pažiūrėkite į action objektą, kuris jums sugeneravosi, atsiųskite jį atsakyme į šią užduotį.