Produkredigeringsblad in die blaaier in Redux

In die vorige les het ons 'n vorm vir die redigering van 'n produk gemaak. Kom ons koppel 'n roete daaraan.

Laat ons ons produktoepassing oopmaak, en daarin die lêer App.jsx en voeg nog een subroete-voorwerp by tot die skikking vir die eienskap children (moenie die invoer van EditProductForm vergeet nie):

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

Ook vir die oorgang na die redigeringsvorm moet ons 'n skakel maak. Laat ons vir hierdie doel ProductPage.jsx oopmaak en hierdie skakel in die terugkerende opmaak plaas na die laaste paragraaf met die produkhoeveelheid en voor die sluitende div:

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

Voer ook Link in vanuit die roeterbiblioteek:

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

Laat ons ons toepassing begin en op die knoppie klik om enige produk te bekyk. Kom ons probeer dit redigeer en gaan terug na die produklys deur op die skakel te klik 'Products' in die spyskaart links. Ook in Redux DevTools kan jy die nuwe aksie sien productUpdated en na die veranderinge kyk van die produkvoorwerp in die store.

Maak jou studentetoepassing oop. Voeg in die lêer App.jsx nog 'n subroete by vir die redigering van studentedata.

Voeg 'n Link-element by in die opmaak op die studenteblad vir die oorgang na die blad om sy data te redigeer.

Begin jou toepassing, probeer die data van een of ander student redigeer. Let op die adresbalk van die blaaier wanneer jy op die redigeringsblad is. Kyk na die veranderinge in die blaaier se Redux DevTools.