Redux'ta Veri İşleme

Önceki bölümde, Redux'un temel işleyiş şemasını uyguladık ve şimdi bir Redux uygulamasının temel çalışma prensiplerini biliyorsunuz. Sonraki derslerde, ürün uygulamamızın işlevselliğini eklemeye başlayacak ve verilerle çalışacağız.

Uygulama yeni bileşenler ve rotalarla genişleyeceğinden, routing ile ilgili bir şey yapalım. Ürün uygulamasını açın, ardından root.jsx dosyasını açın. İçine Outlet bileşenini import edin, bu sırada ProductsList ve NewProductForm import satırlarını silin:

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

Şimdi Root bileşenimiz kök yol olan '/' üzerinde görüntülenecek, diğer tüm bileşenler ise Outlet içindeki alt rotalarda olacak. Bunun için Root bileşeni için #main-page div'inin markup'ını biraz düzeltelim:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Burada NewProductForm ve ProductsList bileşenleri yerine Outlet koyacağız:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

Ürün ekleme formunu artık ProductsList içinde göstereceğiz. Hadi bu bileşenin olduğu dosyayı açalım ve formun import'unu ekleyelim:

import { NewProductForm } from './NewProductForm'

Ve şimdi form bileşenini, ürün listesinin hemen önüne ekleyelim. Artık markup'ımız şöyle görünecek:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

index.css dosyasındaki products-list sınıfı için stili yazalım:

.products-list {
	display: flex;
	flex-direction: column;
}

Geride kalan tek şey, ana App bileşeninde değişiklik yapmak. App.jsx dosyasını açıp içine ProductsList bileşenini import edelim:

import { ProductsList } from './parts/products/ProductsList'

Ardından, şu anki tek rotamız olan kök rotaya children özelliğini ekleyelim:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

Ve bu özelliğin değeri olarak ilk alt rotayı yazalım. Yol olarak 'products' ayarlayalım. Artık bu adreste, ürün listemiz ProductsList görüntülenecek:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Uygulamamızı çalıştıralım ve hiçbir şeyi bozmadığımızdan emin olalım. Kök '/' adresinde sadece başlığı görüyoruz. Form ve ürün listesi ise '/products' adresine gizlenmiş durumda.

Öğrenci uygulamanızı açın. root.jsx dosyasında, StudentsList ve NewStudentForm bileşenlerini Outlet ile değiştirin.

Artık öğrenci ekleme formunuz StudentsList içinde görüntülensin.

Ana App bileşeninizde değişiklikler yapın. Kök rota altına, '/students' yoluna sahip bir alt rota ekleyin, bu rota StudentsList bileşeninizi görüntülesin. Uygulamayı çalıştırın ve her şeyin çalıştığından emin olun.