Redux brauzerida mahsulotni tahrirlash sahifasi

O'tgan darsda biz formani yaratdik mahsulotni tahrirlash uchun. Keling unga marshrutni biriktiriamiz.

Mahsulotlar bilan ilovamizni ochamiz, unda App.jsx faylini ochamiz va yana bitta bola marshrut obyektini qo'shamiz children xususiyati uchun massivga (esingizda bo'lsin EditProductForm ni import qilish kerak):

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

Shuningdek, tahrirlash formasiga o'tish uchun biz havola yaratishimiz kerak. Buning uchun ProductPage.jsx ni ochamiz va bu havolani qaytarilayotgan verstkada joylashtiramiz mahsulot soni haqidagi oxirgi abzatsdan keyin va yopiladigan div dan oldin:

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

Shuningdek, Link ni router kutubxonasidan import qilamiz:

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

Ilovimizni ishga tushiramiz va tugmasini bosing har qanday mahsulotni ko'rish. Keling, uni tahrirlab ko'ramiz va orqaga qaytamiz mahsulotlar ro'yxatiga, havolani bosish orqali 'Products' chap menyuda. Shuningdek, Redux DevTools da siz yangi ekshenni ko'rishingiz mumkin productUpdated va o'zgarishlarni ko'ring store dagi mahsulot obyekti.

Talabalar bilan ilovingizni oching. App.jsx faylida yana bitta bola qo'shing talaba ma'lumotlarini tahrirlash uchun marshrut.

Link elementini qo'shing talaba sahifasidagi verstkada uning ma'lumotlarini tahrirlash sahifasiga o'tish uchun.

Ilovangizni ishga tushiring, harakat qilib ko'ring ma'lum bir talabaning ma'lumotlarini tahrirlang. Manzil qatoriga e'tibor bering brauzerning, siz bo'lganingizda tahrirlash sahifasida. O'zgarishlarni ko'ring brauzerning Redux DevTools da.