Redux-də Brauzerdə Məhsul Redaktə Səhifəsi

Keçən dərsdə biz redaktə forması hazırlamışdıq. Gəlin ona marşrut əlavə edək.

Məhsul tətbiqimizi açaq, App.jsx faylında children xassəsi üçün massivə başqa bir child marşrut obyekti əlavə edək (EditProductForm-u import etməyi unutmayın):

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

Həmçinin redaktə formasına keçid üçün bizə link lazımdır. Bunun üçün ProductPage.jsx faylını açaq və bu linki, məhsul sayı olan son abzasdan sonra və bağlayıcı div-dan əvvəl qoyaq:

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

Həmçinin Link-i router kitabxanasından import edək:

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

Tətbiqimizi işə salaq və hansısa məhsulun baxış düyməsinə klik edək. Onu redaktə etməyə cəhd edək və sol menyudakı 'Products' linkinə klikləyərək məhsul siyahısına qayıdaq. Həmçinin Redux DevTools-da yeni productUpdated aksiyasını görə və store-dakı məhsul obyektindəki dəyişikliklərə baxa bilərsiniz.

Tələbə tətbiqinizi açın. App.jsx faylında tələbə məlumatlarını redaktə etmək üçün başqa bir child marşrut əlavə edin.

Tələbə səhifəsindəki qaydada, onun məlumatlarının redaktə səhifəsinə keçid üçün Link elementi əlavə edin.

Tətbiqinizi işə salın, hansısa tələbənin məlumatlarını redaktə etməyə cəhd edin. Redaktə səhifəsində olduğunuz zaman brauzerin ünvan sətrinə fikir verin. Brauzerin Redux DevTools-undakı dəyişikliklərə baxın.