Форми и локални состојби во Redux

Во претходните часови научивме како да ги добиеме податоците од store и да ги прикажеме во React компонента. На овој час ќе започнеме со додавање на нови податоци. Ова ќе го направиме со помош на форма, која по пополнувањето, продавачот ќе може да додаде нов производ.

Да започнеме со тоа што не секогаш има смисла да се користи глобалната состојба на Redux. Постојат случаи кога за нашите потреби можеме да креираме локални состојби. Локални состојби ќе ги нарекуваме состојбите кои се користат внатре во одредена компонента за технички потреби. На пример, за да се сокрие или прикаже нешто со копче.

Во нашиот случај корисникот ќе внесува податоци во форма и, природно, ќе ни требаат за ова состојби. Можеше да се искористи глобалната Redux состојба, но во ова нема смисла, бидејќи нашите состојби ќе работат само на едно место во апликацијата за формата за додавање на производ. Главното правило кое треба да се следи - не е дозволено, локалните состојби да работат надвор од компонентата во која се создадени, и во никој случај да не се допираат до store. Таква практика често се користи при создавање форми.

Ајде да ја отвориме папката products од нашата апликација со производи, да создадеме во неа датотека NewProductForm.jsx и да го импортираме хукот useState:

import { useState } from 'react'

Сега да го создадеме самата компонента со форма и да напишеме во неа обични состојби, како што правевме претходно во React. Потребни ни се состојби за работа со името, описот, цената и количината на производот:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Потоа да додадеме стандардна обработка за секое поле при внесување на податоци од корисникот:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

И потоа да ја вратиме во компонентата верстката со наслов и празна форма:

return (
	<div>
		<h2>Додади нов производ</h2>
		<form>
		</form>
	</div>
)

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

Вратете во компонентата NewStudentForm верстка, која содржи наслов и празна форма.