Форма за редактиране на данни в 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. Внесете в него промени, както е показано в урока.