Stuur aksie en gebruik die useDispatch hook in Redux

Ons het feitlik al die komponente vir die werking van 'n Redux-toepassing geïmplementeer. Al wat oorbly is om uit te vind hoe om 'n aksie vanaf 'n React-komponent te stuur. Kom ons begin.

Maak ons produktoepassing oop. In die vorm van die komponent NewProductForm is daar vir ons 'n knoppie om die data van die nuwe produk te stoor. Kom ons voeg 'n klikhanterer daaraan toe. Laat die hanterer onSaveProductClick met 'n klik daarop uitvoer:

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

Vir die skep van 'n nuwe produk benodig ons 'n nuwe id daarvoor. Ons sal dit genereer met behulp van die alombekende biblioteek nanoid. Terloops, dit hoef nie geïnstalleer te word nie, aangesien dit reeds saam met die RTK-pakket kom. Laat ons nanoid by die invoer voeg:

import { nanoid } from '@reduxjs/toolkit'

Ons onthou ook dat die enigste manier om state te verander is om die dispatch-metode te roep, wat by die store is, en 'n aksie-objek oor te dra. Om by hierdie metode uit te kom, sal ons die React-Redux-hook useDispatch gebruik. Kom ons voer dit ook in:

import { useDispatch } from 'react-redux'

In die kode van die funksie NewProductForm, laat ons dadelik 'n konstante dispatch daarvoor maak na nadat ons konstantes vir ons plaaslike state gemaak het:

const dispatch = useDispatch()

Ons moet ook die action creator productAdded invoer, wat ons in die vorige les verkry het:

import { productAdded } from './productsSlice'

Nou kan ons die werklike funksie hanterer onSaveProductClick skryf. Laat ons dit voor die opdrag return doen:

const onSaveProductClick = () => {}

Binne die funksie roep ons dispatch, vorm die aksie-objek, in die eienskap payload waarvan die gegenereerde id, naam, beskrywing, prys en hoeveelheid van die produk sal beland. Ons neem al hierdie data uit die plaaslike state. Terselfdertyd kontroleer ons eers in die voorwaarde of alle velde ingevul is - net in hierdie geval roep ons dispatch. Aan die einde van die funksiekode stel ons die plaaslike state terug na die oorspronklike toestand:

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

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

Laat ons nou ons toepassing begin, data invoer in die vormvelde en op die stoorknoppie klik. Hoera, onder op die bladsy verskyn 'n nuwe produk. Deur Redux DevTools oop te maak, en daarin die Inspector-oortjie, sien ons dat links behalwe @@INIT ook ons aksie products/productAdded verskyn het. En in die regterkant kan ons op die oortjies Action en State klik, terwyl ons tussen @@INIT en products/productAdded skakel. Nou sien ons dat ons nuwe produk bygevoeg word. Ook op die Action-oortjie sien ons die aksie, wat outomaties gegenereer is met behulp van createSlice (klik byvoorbeeld op Raw). Hoera: ons hoef dit nie met die hand te skryf nie.

Maak jou studentetoepassing oop, en dan die lêer NewStudentForm.jsx, voeg 'n klikhanterer op die stoorknoppie.

Skryf alle nodige invoere en skryf die funksie-hanterer onSaveStudentClick, deur die metode dispatch toe te pas soos in die les getoon.

Begin die toepassing, voer data in die vormvelde in en klik op die stoorknoppie. Maak seker dat 'n nuwe student onder op die bladsy bygevoeg is.

Maak Redux DevTools oop en gaan deur die Action- en State-oortjies, maak seker dat die nuwe objek met die student bygevoeg word. Kyk na die aksie-objek wat by jou gegenereer is, stuur dit in die antwoord op hierdie taak.