Ukurasa wa Kuhariri Bidhaa kwenye Kivinjari katika Redux

Katika somo lililopita tulitengeneza fomu ya kuhariri bidhaa. Hebu tuichomekee njia.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili App.jsx na tuongeze kitu kingine cha njia ya mtoto kwenye safu ya sifa children (usisahau kuingiza EditProductForm):

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

Pia ili kuhamia kwenye fomu ya kuhariri tunahitaji kutengeneza kiungo. Ili kufanya hivyo tafadhali fungua ProductPage.jsx na uweke kiungo hiki kwenye muundo unaorudiwa baada ya aya ya mwisho na idadi ya bidhaa na kabla ya divi ya kufunga:

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

Pia ingiza Link kutoka kwa maktaba ya kiongozi wa anwani:

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

Wacha tuizindue programu zetu na ubofye kitufe cha kuona bidhaa yoyote. Hebu tuijaribu kuihariri na turudi nyuma kwenye orodha ya bidhaa, ukibofya kiungo 'Bidhaa' kwenye menyu ya upande wa kushoto. Pia kwenye Redux DevTools unaweza kuona kitendo kipya productUpdated na kuangalia mabadiliko ya kitu chenye bidhaa kwenye kuhifadhi.

Fungua programu yako ya wanafunzi. Kwenye faili App.jsx ongeza njia nyingine ya mtoto kwa kuhariri data ya mwanafunzi.

Ongeza kipengele Link kwenye muundo wa ukurasa wa mwanafunzi ili kuelekea kwenye ukurasa wa kuhariri data zake.

Washa programu yako, jaribu kuhariri data za mwanafunzi yeyote. Zingatia mstari wa anwani kwenye kivinjari, unapokuwa kwenye ukurasa wa kuhariri. Angalia mabadiliko kwenye Redux DevTools za kivinjari.