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):

{
	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:

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

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

import { 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.

Öğrenci uygulamanızı açın. App.jsx dosyasında, bir öğrencinin verilerini düzenlemek için bir tane daha alt rota ekleyin.

Öğrenci sayfasının JSX'inde, verilerini düzenleme sayfasına geçiş yapmak için bir Link öğesi ekleyin.

Uygulamanızı çalıştırın, bir öğrencinin verilerini düzenlemeyi deneyin. Düzenleme sayfasındayken tarayıcınızın adres çubuğuna dikkat edin. Tarayıcınızdaki Redux DevTools'taki değişiklikleri inceleyin.