Pengendalian Data dalam Redux

Dalam bahagian sebelumnya, kami melaksanakan skema asas untuk Redux dan kini anda tahu prinsip-prinsip utama aplikasi Redux. Dalam pelajaran seterusnya, kita akan mula menambah fungsi kepada aplikasi produk kami dan bekerja dengan data.

Memandangkan aplikasi akan ditambah dengan komponen dan laluan baharu, mari kita lakukan satu perkara dengan penghalaan. Buka aplikasi produk, kemudian fail root.jsx. Import komponen Outlet ke dalamnya, sambil memadam barisan import untuk ProductsList dan NewProductForm:

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

Sekarang, komponen Root akan dipaparkan pada laluan akar '/', dan semua komponen lain pada laluan anak dalam Outlet. Untuk ini, mari kita betulkan sedikit susun atur div #main-page untuk komponen Root:

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

Di sini kita akan letakkan Outlet menggantikan komponen NewProductForm dan ProductsList:

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

Kami kini akan memaparkan borang untuk menambah produk dalam ProductsList. Mari buka fail dengan komponen ini dan tambah import borang:

import { NewProductForm } from './NewProductForm'

Dan sekarang tambah komponen borang tepat sebelum senarai produk. Sekarang, susun atur kami akan kelihatan seperti ini:

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

Mari tulis gaya untuk kelas products-list dalam index.css:

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

Apa yang tinggal untuk kita lakukan ialah membuat perubahan dalam komponen utama App. Mari buka App.jsx dan import komponen ProductsList ke dalamnya:

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

Kemudian, untuk satu-satunya laluan kami setakat ini, iaitu laluan akar, tambah sifat children:

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

Dan tulis dalam nilai sifat ini sebagai laluan anak pertama. Tetapkan laluannya sebagai 'products'. Sekarang pada alamat ini, senarai produk kami ProductsList akan dipaparkan:

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

Mari jalankan aplikasi kami dan pastikan bahawa kami tidak merosakkan apa-apa. Pada akar '/' kita hanya melihat tajuk. Manakala borang dan senarai produk kami tersembunyi di alamat '/products'.

Buka aplikasi pelajar anda. Dalam fail root.jsx, gantikan komponen StudentsList dan NewStudentForm dengan Outlet.

Sekarang, pastikan borang untuk menambah pelajar dipaparkan dalam StudentsList anda.

Buat perubahan dalam komponen utama anda App. Tambah laluan anak kepada laluan akar, dengan laluan '/students', di mana StudentsList anda akan dipaparkan. Jalankan aplikasi dan pastikan semuanya berfungsi.