პროდუქტის რედაქტირების გვერდი ბრაუზერში Redux-ში

წინა გაკვეთილზე ჩვენ გავაკეთეთ ფორმა პროდუქტის რედაქტირებისთვის. მოდით მივაბათ მას მარშრუტი.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, ხოლო მასში ფაილი App.jsx და დავამატოთ კიდევ ერთი ქვე-მარშრუტის ობიექტი children თვისების მასივში (არ დაგავიწყდეთ EditProductForm-ის იმპორტი):

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

ასევე რედაქტირების ფორმაზე გადასასვლელად ჩვენ გვჭირდება ბმულის შექმნა. ამისთვის გავხსნათ ProductPage.jsx და მოვათავსოთ ეს ბმული დაბრუნებულ ვერსტკაში პროდუქტის რაოდენობის ბოლო აბზაცის შემდეგ და დამხურავი დივის წინ:

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

ასევე იმპორტირება გავაკეთოთ Link-ის როუტერის ბიბლიოთეკიდან:

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

გავუშვათ ჩვენი აპლიკაცია და დავაკლიკოთ რომელიმე პროდუქტის ნახვის ღილაკს. ვცადოთ მისი რედაქტირება და დავუბრუნდეთ უკან პროდუქტების სიას, დაჭერით ბმულზე 'Products' მარცხენა მენიუში. ასევე Redux DevTools-ში თქვენ შეგიძლიათ ნახოთ ახალი ექშენი productUpdated და დააკვირდეთ ცვლილებებს პროდუქტის ობიექტში store-ში.

გახსენით თქვენი აპლიკაცია სტუდენტებთან. ფაილში App.jsx დაამატეთ კიდევ ერთი ქვე მარშრუტი სტუდენტის მონაცემების რედაქტირებისთვის.

დაამატეთ ელემენტი Link ვერსტკაში სტუდენტის გვერდზე მის მონაცემთა რედაქტირების გვერდზე გადასასვლელად.

გაუშვით თქვენი აპლიკაცია, სცადეთ დარედაქტიროთ რომელიმე სტუდენტის მონაცემები. მიაქციეთ ყურადღება ბრაუზერის მისამართების ზოლს, როცა იმყოფებით რედაქტირების გვერდზე. ნახეთ ცვლილებები ბრაუზერის Redux DevTools-ში.