Bekerja dengan Data di Redux

Pada bagian sebelumnya kita telah mengimplementasikan skema dasar kerja Redux dan sekarang Anda mengetahui prinsip-prinsip utama kerja aplikasi Redux. Pada pelajaran-pelajaran berikutnya kita akan mulai menambahkan fungsionalitas ke aplikasi kita tentang produk dan bekerja dengan data.

Karena aplikasi akan ditambahkan dengan komponen dan rute baru, mari kita lakukan satu hal dengan routing. Buka aplikasi produk, kemudian file root.jsx. Impor komponen Outlet ke dalamnya, sambil menghapus baris yang mengimpor ProductsList dan NewProductForm:

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

Sekarang komponen Root akan ditampilkan pada path root '/', dan semua komponen lainnya pada child di Outlet. Untuk itu, mari kita perbaiki sedikit markup div #main-page untuk komponen Root:

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

Di sini kita akan meletakkan Outlet sebagai pengganti komponen NewProductForm dan ProductsList:

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

Form untuk menambah produk sekarang akan kita tampilkan di dalam ProductsList. Mari buka file dengan komponen ini dan tambahkan impor form:

import { NewProductForm } from './NewProductForm'

Dan sekarang tambahkan komponen form tepat sebelum daftar produk. Sekarang markup kita akan terlihat seperti ini:

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

Mari tambahkan gaya untuk kelas products-list di index.css:

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

Kita tinggal melakukan perubahan pada komponen utama App. Buka App.jsx dan impor komponen ProductsList ke dalamnya:

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

Kemudian untuk satu-satunya rute kita saat ini, yang merupakan root, tambahkan properti children:

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

Dan tuliskan di dalam nilai properti ini sebagai child route pertama. Untuk path-nya atur ke 'products'. Sekarang pada alamat ini akan ditampilkan daftar produk kita ProductsList:

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

Mari jalankan aplikasi kita dan pastikan bahwa kita tidak merusak apa pun. Di root '/' kita melihat hanya judul. Sedangkan form dan daftar produk kita tersembunyi di alamat '/products'.

Buka aplikasi Anda tentang mahasiswa. Di file root.jsx ganti komponen StudentsList dan NewStudentForm dengan Outlet.

Sekarang biarkan form untuk menambah mahasiswa ditampilkan di dalam StudentsList Anda.

Lakukan perubahan pada komponen utama Anda App. Tambahkan ke rute root sebuah child, dengan path '/students', di mana StudentsList Anda akan ditampilkan. Jalankan aplikasi dan pastikan semuanya bekerja.