Өнімді өңдеу беті браузерде Redux-та

Өткен сабақта біз өнімді өңдеу үшін пішін жасадық. Оған маршрут қосайық.

Өнімдер қолданбамызды ашып, ондағы App.jsx файлын ашып, children қасиеті үшін массивке тағы бір бала маршрут объектісін қосамыз (EditProductForm компонентін импорттауды ұмытпаңыз):

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

Сондай-ақ, өңдеу пішініне өту үшін біз сілтеме жасауымыз керек. Ол үшін ProductPage.jsx файлын ашып, бұл сілтемені өнім саны бар соңғы абзацтан кейін және жабылатын див алдында қайтарылатын версткада орналастырамыз:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	өңдеу
</Link>

Сондай-ақ, роутер кітапханасынан Link компонентін импорттаймыз:

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

Қолданбамызды іске қосып, кез келген өнімді қарау түймесін басайық. Оны өңдеп көрейік, содан кейін сол жақтағы мәзірдегі 'Өнімдер' сілтемесін басу арқылы өнімдер тізіміне оралайық. Сондай-ақ, Redux DevTools-та productUpdated деген жаңа экшенді және store-дағы өнім объектісіндегі өзгерістерді көре аласыз.

Студенттеріңізбен қолданбаны ашыңыз. App.jsx файлында студент деректерін өңдеу үшін тағы бір бала маршрут қосыңыз.

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

Қолданбаңызды іске қосыңыз, кез келген студенттің деректерін өңдеп көріңіз. Өңдеу бетінде тұрған кезде браузердің адрестік жолына назар аударыңыз. Браузердің Redux DevTools-ындағы өзгерістерді қараңыз.