Страница за уредување на производ во прелистувачот во Redux

На претходната лекција направивме форма за уредување на производ. Ајде да додадеме рута за неа.

Да го отвориме нашето приложение со производи, а во него датотеката App.jsx и да додадеме уште еден објект на детска рута во низата за својството children (не заборавајте да го импортирате EditProductForm):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Исто така, за премин на формата за уредување треба да направиме линк. За ова да ја отвориме ProductPage.jsx и да го поставиме овој линк во вратената разметка после последниот параграф со количината на производот и пред затворачкиот div:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Исто така, импортирајте го Link од библиотеката за рутирање:

import { Link } from 'react-router-dom'

Да го стартуваме нашето приложение и да кликнеме на копчето за преглед на некој производ. Да се обидеме да го уредиме и да се вратиме назад кон листата на производи, со кликнување на линкот 'Products' во мението лево. Исто така, во Redux DevTools може да го видите новиот акција productUpdated и да ги видите промените на објектот со производот во store.

Отворете го вашето приложение со студенти. Во датотеката App.jsx додадете уште една детска рута за уредување на податоците на студентот.

Додадете елемент Link во разметката на страницата на студентот за премин на страницата за уредување на неговите податоци.

Стартувајте го вашето приложение, обидете се да ги уредите податоците на некој студент. Обрнете внимание на адресната линија на прелистувачот, кога сте на страницата за уредување. Погледнете ги промените во Redux DevTools на прелистувачот.