Форма за уредување на податоци во Redux

Сега имаме редуктор за менување податоци во store. На овој урок ќе создадеме форма, со која ќе можеме да ги уредуваме податоците за производот.

Да ја отвориме нашата апликација со производи и да создадеме во папката products датотека EditProductForm.jsx. Создавањето на компонентата EditProductForm ќе биде аналогно на NewProductForm, со исклучок на некои разлики, на кои ќе се задржиме. Затоа копирајте го целосно кодот од NewProductForm.jsx и вметнете го во создадената датотека EditProductForm.jsx. Сега да почнеме по ред.

Отстранете го од импортот nanoid, овде не ни треба да генерираме id. Заменете го импортот productAdded со productUpdated, бидејќи овде ќе користиме action за ажурирање, а не за додавање на производ.

Понатаму ќе го смениме името на нашата функција на компонентата од NewProductForm на EditProductForm.

Пред да ги воведеме локалните state-ови во функцијата EditProductForm за name, desc, price и amount, да вметнеме уште неколку линии код. Како што веќе споменавме претходно, овде не ни треба да генерираме id. Сега нашата задача е да го добиеме од податоците на производот што се менува. Ние веќе го направивме ова при создавањето на посебна страница за производот. Значи, ќе го добиеме id со помош на hook-от useParams, а потоа ќе го пронајдеме потребниот производ, користејќи го hook-от useSelector (не заборавајте да ги импортирате обата hook-ови на почетокот на датотеката):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

После ова, ќе го смениме блокот со декларација на локалните state-ови. Сега ни треба како почетна вредност да им ги зададеме добиените од store податоци за производот. Вака ќе изгледа првиот state, преработете ги трите преостанати сами:

const [name, setName] = useState(product.name)

По доделувањето на променливата за useDispatch да додадеме уште една линија код овој пат за hook-от useNavigate. Ќе го користиме за враќање на страницата со производот, кога корисникот ќе ги зачува направените промени во формата:

const navigate = useNavigate()

Исто така, импортирајте го овој hook на почетокот на датотеката:

import { useNavigate, useParams } from 'react-router-dom'

Понатаму имаме обработувачи за полињата за внесување. А после нив ни е потребно да ја прилагодиме функцијата onSaveProductClick. Сега во неја при клик ќе испраќаме акција productUpdated со добиениот id и променетите податоци во вид на објект. После ќе го додадеме нашиот navigate, за премин на страницата на променетиот производ:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

Останува само во нашиот вратен HTML да ја пронајдеме линијата:

<h2>Add a New Product</h2>

И да ја замениме со:

<h2>Edit Product</h2>

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