Wysyłanie action i hook useDispatch w Redux

Zaimplementowaliśmy praktycznie wszystkie elementy niezbędne do działania aplikacji Redux. Pozostało tylko zapoznać się z wysyłaniem action z komponentu React. Zaczynajmy.

Otwórz naszą aplikację z produktami. W formularzu komponentu NewProductForm mamy przycisk do zapisywania danych nowego produktu. Nałóżmy na niego procedurę obsługi kliknięcia. Niech po kliknięciu na niego uruchamia się procedura obsługi onSaveProductClick:

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

Przy tworzeniu nowego produktu będziemy potrzebować dla niego nowego id. Będziemy je generować za pomocą powszechnie znanej biblioteki nanoid. Nawiasem mówiąc, nie trzeba jej instalować, ponieważ jest już dołączona do pakietu RTK. Dodajmy nanoid do importu:

import { nanoid } from '@reduxjs/toolkit'

Pamiętamy również, że jedyny sposób zmiany state - to wywołać metodę dispatch, którą posiada store i przekazać obiekt action. Aby dotrzeć do tej metody, zastosujemy hook React-Redux useDispatch. Zaimportujmy go:

import { useDispatch } from 'react-redux'

W kodzie funkcji NewProductForm zdefiniujmy dla niego stałą dispatch zaraz po tym, jak zdefiniowaliśmy stałe dla naszych lokalnych stanów:

const dispatch = useDispatch()

Musimy również zaimportować action creator productAdded, który otrzymaliśmy na poprzedniej lekcji:

import { productAdded } from './productsSlice'

Teraz możemy napisać samą funkcję procedury obsługi onSaveProductClick. Zróbmy to przed instrukcją return:

const onSaveProductClick = () => {}

Wewnątrz funkcji wywołujemy dispatch, tworzymy obiekt action, we właściwość payload którego trawi wygenerowane id, nazwa, opis, cena i ilość produktu. Wszystkie te dane pobieramy z lokalnych stanów. Jednocześnie na początku sprawdzamy w warunku czy wszystkie pola są wypełnione - tylko w tym przypadku wywołujemy dispatch. Na końcu kodu funkcji przywracamy lokalne stany do stanu początkowego:

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

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

Teraz uruchommy naszą aplikację, wprowadźmy dane w pola formularza i naciśnijmy przycisk zapisywania. Hura, na dole strony pojawił się nowy produkt. Otwierając Redux DevTools, a w nim zakładkę Inspector, widzimy, że po lewej stronie oprócz @@INIT pojawił się także nasz action products/productAdded. A w prawej części możemy klikać po zakładkach Action i State, przełączając przy tym @@INIT i products/productAdded. Teraz widzimy, że nasz nowy produkt się dodaje. Również na zakładce Action widzimy action, wygenerowany automatycznie za pomocą createSlice (kliknij, na przykład, po Raw). Hura: nie musieliśmy go przepisywać ręcznie.

Otwórz twoją aplikację ze studentami, a następnie plik NewStudentForm.jsx, nałóż na przycisk zapisywania procedurę obsługi kliknięcia.

Wpisz wszystkie niezbędne importy i napisz funkcję-procedurę obsługi onSaveStudentClick, stosując metodę dispatch jak pokazano na lekcji.

Uruchom aplikację, wprowadź w pola formularza dane i naciśnij na przycisk zapisywania. Upewnij się, że na stronie na dole dodał się nowy student.

Otwórz Redux DevTools i przejrzyj zakładki Action i State, upewnij się, że dodaje się nowy obiekt ze studentem. Spójrz na obiekt action, który u ciebie wygenerował się, prześlij go w odpowiedzi na to zadanie.