การทำงานกับข้อมูลใน Redux

ในหัวข้อที่ผ่านมาเราได้นำเสนอโครงร่างพื้นฐาน ของการทำงานของ Redux และตอนนี้คุณก็รู้หลักการสำคัญ ของการทำงานของแอปพลิเคชัน Redux แล้ว ในบทเรียนต่อๆ ไป เราจะเริ่มเสริมฟังก์ชันการทำงานให้กับแอปพลิเคชัน เกี่ยวกับสินค้าของเราและจะทำงาน กับข้อมูล

เนื่องจากแอปพลิเคชันจะมีคอมโพเนนต์ใหม่ๆ และเส้นทางเพิ่มขึ้น เรามาทำสิ่งหนึ่ง เกี่ยวกับการกำหนดเส้นทางกัน เปิดแอปพลิเคชัน เกี่ยวกับสินค้า จากนั้นเปิดไฟล์ root.jsx นำเข้า คอมโพเนนต์ Outlet เข้ามา โดยลบ บรรทัดที่นำเข้า ProductsList และ NewProductForm ออก:

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

ตอนนี้คอมโพเนนต์ Root ของเราจะแสดงผล ที่เส้นทางหลัก '/' ส่วนคอมโพเนนต์อื่นๆ ทั้งหมด จะแสดงผลที่เส้นทางลูกใน Outlet เพื่อการนี้เราจะแก้ไข การจัดวางของ div #main-page สำหรับคอมโพเนนต์ Root เล็กน้อย:

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

ตรงนี้เราจะใส่ Outlet แทนที่ คอมโพเนนต์ NewProductForm และ ProductsList:

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

ฟอร์มสำหรับเพิ่มสินค้า ตอนนี้เราจะ แสดงผลใน ProductsList ลองเปิด ไฟล์ของคอมโพเนนต์นี้และเพิ่มการนำเข้าฟอร์ม:

import { NewProductForm } from './NewProductForm'

และตอนนี้ให้เพิ่มคอมโพเนนต์ฟอร์มตรงก่อน รายการสินค้า ตอนนี้การจัดวางของเรา จะมีหน้าตาดังนี้:

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

มาเขียนสไตล์สำหรับคลาส products-list ใน index.css เพิ่มเติม:

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

สิ่งที่เราต้องทำเหลือเพียงแค่นำการเปลี่ยนแปลง เข้าไปในคอมโพเนนต์หลัก App เปิด App.jsx และนำเข้าคอมโพเนนต์ ProductsList เข้ามาในนั้น:

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

จากนั้น สำหรับเส้นทางเดียวของเราในตอนนี้ ซึ่งเป็นเส้นทางหลัก ให้เพิ่ม คุณสมบัติ children:

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

และกำหนดค่าให้กับคุณสมบัตินี้เป็น เส้นทางลูกเส้นทางแรก โดยกำหนดเส้นทาง ให้เป็น 'products' ตอนนี้ที่ที่อยู่นี้ ของเราจะแสดงผล รายการสินค้าของเรา ProductsList:

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

มาเริ่มต้นแอปพลิเคชันของเราและตรวจสอบว่า เราไม่ได้ทำอะไรพัง ที่เส้นทางหลัก '/' เราเห็น เพียงหัวข้อเท่านั้น ส่วนฟอร์มและรายการสินค้า ของเราซ่อนอยู่ที่ที่อยู่ '/products'

เปิดแอปพลิเคชันเกี่ยวกับนักศึกษาของคุณ ในไฟล์ root.jsx ให้แทนที่คอมโพเนนต์ StudentsList และ NewStudentForm ด้วย Outlet

ให้ตอนนี้ฟอร์มสำหรับเพิ่มนักศึกษา แสดงผลใน StudentsList ของคุณ

นำการเปลี่ยนแปลงเข้าสู่คอมโพเนนต์หลัก App ของคุณ เพิ่มเส้นทางลูกให้กับเส้นทางหลัก โดยมีเส้นทางเป็น '/students' ซึ่งจะ แสดงผล StudentsList ของคุณ เริ่มต้น แอปพลิเคชันและตรวจสอบว่าทุกอย่าง ทำงานได้