สองแนวคิดพื้นฐานใน Redux

ก่อนที่จะเริ่มศึกษาคำสั่งไลบรารี Redux เรามาทำความรู้จักกับสองแนวคิดพื้นฐานของมันก่อน แนวคิดแรก ซึ่งเกี่ยวกับการจัดการสถานะ เราจะพิจารณาจากตัวอย่างตัวนับทั่วไป บน state ใน React:

function Counter() {
	// State
	const [count, setCount] = useState(0)

	// Action:
	function clickHandler() {
		setCount(count + 1)
	}

	// View:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

ในโค้ดนี้เราเห็น state สำหรับตัวแปรcount - นี่คือ แหล่งที่มาของความจริงสำหรับตัวนับ จากนั้นเราเห็น การกระทำ (action) - เหตุการณ์ ซึ่งเมื่อผู้ใช้คลิกจะทำให้เกิด การอัปเดต state และสุดท้าย การแสดงผล (view) ซึ่งเราใช้แสดง ส่วนติดต่อผู้ใช้

ดังนั้นโครงร่างค่อนข้างง่าย: ปุ่มถูกกด - statecount (State) เมื่อกด (Action) เปลี่ยนแปลง ดังนั้น การแสดงผล (View) จึงเปลี่ยนแปลง - ในกรณีของเรา นั่นคือตัวเลขบนหน้าจอ

อย่างไรก็ตาม ทุกอย่างจะซับซ้อนขึ้นหากเรามีคอมโพเนนต์ จำนวนมากที่ต้องใช้ state เดียวกัน แน่นอนว่าเราสามารถทำได้ เช่น ยก state ขึ้น ไปยังคอมโพเนนต์ระดับพ่อแม่ แต่การแก้ไขนั้นไม่สามารถ แก้ปัญหาได้เสมอไป Redux ในกรณีนี้ เสนอให้เราสร้าง สถานที่เดียวในแอปพลิเคชัน ซึ่งจะเก็บสถานะส่วนกลาง และรูปแบบพฤติกรรมที่กำหนดไว้เมื่อ อัปเดตสถานะนั้น นี่คือสาระสำคัญ ของแนวคิดพื้นฐานแรก (!)

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

อธิบายว่าแนวคิดพื้นฐานแรก ของ Redux อยู่ที่อะไร

อธิบายว่าแนวคิดพื้นฐานที่สอง ของ Redux อยู่ที่อะไร