Форма за уређивање података у 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. Користићемо га за повратак на страницу са продуктом, када корисник сачува промене унесене у форму:

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

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

<h2>Add a New Product</h2>

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

<h2>Edit Product</h2>

Отворите вашу апликацију са студентима. Направите фајл EditStudentForm.jsx по аналогији са NewStudentForm.jsx. Унесите у њега измене, као што је приказано у лекцији.