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'

Колдонмобузду иштетип, каалаган продуктуну көрүү баскычын басалы. Аны оңдоп көрөлү жана сол жагындагы менюдөгү 'Продуктулар' шилтемесин басып, продуктулар тизмесине кайталык. Ошондой эле, Redux DevTools'то сиз жаңы productUpdated экшен көрө аласыз жана store'догу продукт объектисинин өзгөрүүлөрүн көрө аласыз.

Студенттер менен колдонмоңузду ачыңыз. App.jsx файлында студенттин маалыматын оңдоо үчүн дагы бир багытынчы маршрут кошуңуз.

Студенттин баракчасынын версткасына анын маалыматын оңдоо баракчасына өтүү үчүн Link элементин кошуңуз.

Колдонмоңузду иштетиңиз, каалаган бир студенттин маалыматын оңдоп көрүңүз. Оңдоо баракчасында болгонуңузда браузердин дарек сабына көңүл буруңуз. Браузердин Redux DevTools'ундагы өзгөрүүлөрдү караңыз.