Форма для рэдагавання даных у Redux

Цяпер у нас ёсць рэдьюсер для змены даных у store. На гэтым уроке мы створым форму, з дапамогай якой мы зможам рэдагаваць даныя прадукту.

Давайце адкрыем наша прыкладанне з прадуктамі і створым у папцы products файл EditProductForm.jsx. Стварэнне кампанента EditProductForm будзе аналагічна NewProductForm, за выключэннем некаторых адрозненняў, на якіх мы будзем спыняцца. Таму скапіюйце цалкам код NewProductForm.jsx і ўстаўце яго ў створаны файл EditProductForm.jsx. Цяпер пачнем па парадку.

Забярыце з імпарту nanoid, тут нам не трэба генераваць id. Заменіце імпарт productAdded на productUpdated, бо тут мы будзем выкарыстоўваць action для абнаўлення, а не для дадання прадукту.

Далей зменім назву функцыі нашага кампанента з NewProductForm на EditProductForm.

Перад тым, як мы завядзем лакальныя стэйты ў функцыі EditProductForm для name, desc, price і amount, давайце ўставім яшчэ некалькі радкоў кода. Як мы ўжо згадвалі раней, тут нам не трэба генераваць id. Цяпер наша задача атрымаць яго з даных якія змяняюцца прадукту. Мы ўжо так рабілі пры стварэнні асобнай староначкі для прадукту. Такім чынам, атрымаем id пры дапамозе хука useParams, а затым знойдзем патрэбны нам прадукт, выкарыстоўваючы хук useSelector (не забудзьце імпартаваць абодва хука ў пачатку файла):

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

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

Пасля гэтага зменім блок з аб'явай лакальных стэйтаў. Цяпер нам трэба ў якасці пачатковага значэння задаваць ім атрыманыя з store даныя прадукту. Вось так будзе выглядаць першы стэйт, перарабіце тры якія засталіся самі:

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

Пасля прызначэння пераменнай для useDispatch давайце ўнясём яшчэ адзін радок кода на гэты раз для хука useNavigate. Мы будзем яго выкарыстоўваць для вяртання на старонку з прадуктам, калі карыстальнiк захоча ўнесеныя ў форме змены:

const navigate = useNavigate()

Таксама імпартуйце гэты хук у пачатку файла:

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(`/by/products/${productId}`);
	}
}

Засталося толькі ў нашай якая вяртаецца вёрстцы знайсці радок:

<h2>Add a New Product</h2>

І замяніць яе на:

<h2>Edit Product</h2>

Адкрыйце ваша прыкладанне са студэнтамі. Стварыце файл EditStudentForm.jsx па аналогіі з NewStudentForm.jsx. Унясіце ў яго змены, як паказана ў уроку.