Redux'ta Tarayıcıda Ürün Düzenleme Sayfası

Önceki derste bir ürün düzenleme formu yaptık. Şimdi ona bir rota bağlayalım.

Ürün uygulamamızı açalım, içindeki App.jsx dosyasını açalım ve children özelliği için diziye bir tane daha alt rota nesnesi ekleyelim (EditProductForm'u import etmeyi unutmayın):

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

Ayrıca düzenleme formuna geçiş yapmak için bir linke ihtiyacımız var. Bunun için ProductPage.jsx dosyasını açalım ve bu linki, ürün miktarı ile ilgili son paragraftan sonra ve kapanan div'den önce, döndürülen JSX'e yerleştirelim:

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

Ayrıca Link'i router kütüphanesinden import edelim:

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

Uygulamamızı çalıştıralım ve herhangi bir ürünün görüntüleme butonuna tıklayalım. Onu düzenlemeyi deneyelim ve sol menüdeki 'Products' linkine tıklayarak ürün listesine geri dönelim. Ayrıca Redux DevTools'ta yeni bir productUpdated eylemi görebilir ve mağazadaki ürün nesnesindeki değişiklikleri inceleyebilirsiniz.