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

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

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

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

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

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

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

products/ProductPage.jsximport { Link } from 'react-router-dom'

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