Làm việc với dữ liệu trong Redux

Trong phần trước, chúng ta đã triển khai lược đồ cơ bản của Redux và bây giờ bạn đã biết các nguyên tắc chính của ứng dụng Redux. Trong các bài học tiếp theo, chúng ta sẽ bắt đầu bổ sung chức năng cho ứng dụng của chúng ta với các sản phẩm và làm việc với dữ liệu.

Vì ứng dụng sẽ phát triển thêm các component và route mới, hãy làm một việc với định tuyến. Mở ứng dụng với các sản phẩm, sau đó mở file root.jsx. Import vào đó component Outlet, đồng thời xóa các dòng import ProductsList và NewProductForm:

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

Bây giờ component Root của chúng ta sẽ hiển thị theo đường dẫn gốc '/', còn tất cả các component khác sẽ hiển thị theo các route con trong Outlet. Để làm điều này, hãy sửa một chút phần HTML của div #main-page cho component Root:

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

Ở đây chúng ta sẽ đặt Outlet thay vì các component NewProductForm và ProductsList:

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

Form để thêm sản phẩm bây giờ chúng ta sẽ hiển thị trong ProductsList. Hãy mở file chứa component này và thêm import form:

import { NewProductForm } from './NewProductForm'

Và bây giờ hãy thêm component form ngay trước danh sách sản phẩm. Bây giờ phần HTML của chúng ta sẽ trông như thế này:

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

Chúng ta sẽ viết thêm style cho class products-list trong index.css:

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

Chúng ta chỉ còn phải thực hiện các thay đổi trong component chính App. Hãy mở App.jsx và import vào đó component ProductsList:

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

Sau đó, cho route duy nhất của chúng ta hiện tại, route gốc, hãy thêm thuộc tính children:

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

Và khai báo giá trị của thuộc tính này là route con đầu tiên. Đặt đường dẫn là 'products'. Bây giờ tại địa chỉ này sẽ hiển thị danh sách sản phẩm của chúng ta ProductsList:

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

Hãy chạy ứng dụng của chúng ta và đảm bảo rằng chúng ta không làm hỏng gì. Ở gốc '/' chúng ta thấy chỉ có tiêu đề. Còn form và danh sách sản phẩm đã được ẩn theo địa chỉ '/products'.

Mở ứng dụng của bạn với sinh viên. Trong file root.jsx, thay thế các component StudentsList và NewStudentForm bằng Outlet.

Bây giờ hãy để form thêm sinh viên hiển thị trong StudentsList của bạn.

Thực hiện các thay đổi trong component chính App của bạn. Thêm vào route gốc một route con, với đường dẫn '/students', theo đó sẽ hiển thị StudentsList của bạn. Chạy ứng dụng và đảm bảo rằng mọi thứ hoạt động.