Испраќање на action и hook-от useDispatch во Redux

Ние ги имплементиравме речиси сите составни делови за функционирање на Redux апликацијата. Останува само да се разбереме со испраќање на action од React компонента. Да почнеме.

Отворете ја нашата апликација со производи. Во формата на компонентата NewProductForm кај нас има копче за зачувување на податоците на новиот производ. Ајде да додадеме обработувач за клик. Нека при клик на него се активира обработувачот onSaveProductClick:

<button type="button" onClick={onSaveProductClick}>
	зачувај
</button>

При креирање на нов производ ќе ни треба нов id за него. Ќе го генерираме користејќи ја добро познатата библиотека nanoid. Патем, не треба да се инсталира, бидејќи веќе доаѓа со пакетот RTK. Ајде да ја додадеме nanoid во импортот:

import { nanoid } from '@reduxjs/toolkit'

Исто така, се сеќаваме дека единствениот начин да се смени state - тоа е да се повика методот dispatch, кој го има кај store и да се пренесе објектот action. За да го доставиме овој метод, ние ќе го примениме React-Redux hook-от useDispatch. Ајде да го импортираме и него:

import { useDispatch } from 'react-redux'

Во кодот на функцијата NewProductForm да ја дефинираме за него константата dispatch веднаш по дефинирањето на константите за нашите локални состојби:

const dispatch = useDispatch()

Исто така, неопходно е да го импортираме action creator-от productAdded, кој го добивме на претходната лекција:

import { productAdded } from './productsSlice'

Сега можеме да ја напишеме самата функција на обработувачот onSaveProductClick. Да го направиме ова пред командата return:

const onSaveProductClick = () => {}

Внатре во функцијата ја повикуваме dispatch, го формираме објектот action, во својството payload на кој ќе влезат генерираниот id, името, описот, цената и количината на производот. Сите овие податоци ги земаме од локалните состојби. При тоа на почетокот проверуваме во услов дали сите полиња се пополнети - само во тој случај го повикуваме dispatch. На крајот од кодот на функцијата ги враќаме локалните состојби во почетна состојба:

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

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

Сега да ја стартуваме нашата апликација, да внесеме податоци во полињата на формата и да притиснеме на копчето за зачувување. Ура, долу на страницата се појавил нов производ. Отворајќи ги Redux DevTools, а во нив јазичето Inspector, гледаме дека лево освен @@INIT се појавил и нашиот action products/productAdded. А во десниот дел можеме да кликнуваме на јазичињата Action и State, префрлајќи ги притоа @@INIT и products/productAdded. Сега гледаме дека нашиот нов производ се додава. Исто така на јазичето Action го гледаме action-от, генериран автоматски со помош на createSlice (кликнете, на пример, на Raw). Ура: не моравме рачно да го дефинираме.

Отворете ја вашата апликација со студенти, а потоа датотеката NewStudentForm.jsx, додадете на копчето за зачувување обработувач за клик.

Напишете ги сите потребни импортови и напишете ја функцијата-обработувач onSaveStudentClick, применувајќи го методот dispatch како што е прикажано во лекцијата.

Стартувајте ја апликацијата, внесете ги во полињата на формата податоците и притиснете на копчето за зачувување. Проверете дали на страницата долу се додал нов студент.

Отворете ги Redux DevTools и поминете низ јазичињата Action и State, проверете дали новиот објект со студент се додава. Погледнете го објектот action, кој се генерирал, испратете го во одговорот на оваа задача.