Reduxda brauzerde önümi düzetmek sahypasy

Öňki sapakda biz önüm üçin düzetme formasy döretdik. Indi oňa bir ýol birikdireýin.

Önümler ulgamyzy açalyň we içindäki App.jsx faýlynda, children aýratynlygy üçin masywa ýene bir goşmaça ýol objekti goşuň (EditProductForm komponentini import etmegi ýatdan çykarmaň):

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

Şeýle hem, düzetme formasyna geçmek üçin biz bir baglanyşyk döretmeli. Bunuň üçin ProductPage.jsx faýlyny açyň we bu baglanyşygy, önümiň sany baradaky iň soňky abzasdan soň we ýapyjy div tegenden öň, gaýtarylýan wersiýada ýerleşdiriň:

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

Şeýle hem, Link komponentini router kitaphanasyndan import ediň:

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

Ulgamyzy işledip, haýsydyr bir önümi görmek üçin düwmä basuň. Oňa düzetme etmäge synanyşyp görüň we soldaky menýudaky 'Products' baglanyşygyna basyp önümler sanawyna yza gaýdyň. Şeýle hem, Redux DevTools-da täze productUpdated hereketini görüp, store-daky önüm objekti üçindäki üýtgeşmeleri gözden geçirip bilersiňiz.

Talyp ulgamyzyzy açyň. App.jsx faýlyna, talybyň maglumatlaryny düzetmek üçin ýene bir goşmaça ýol goşuň.

Talybyň sahypasyndaky wersiýada, onuň maglumatlaryny düzetmek sahypasyna geçmek üçin bir Link elementini goşuň.

Ulgamyzyzy işledip, haýsydyr bir talybyň maglumatlaryna düzetme etmäge synanyşyň. Düzetme sahypasynda iken brauzeriň adres setirine üns beriň. Brauzeriň Redux DevToolsundaky üýtgeşmeleri gözden geçiriň.