Hai ý tưởng cơ bản trong Redux

Trước khi bắt đầu tìm hiểu thư viện Redux, hãy cùng làm quen với hai ý tưởng cơ bản của nó. Ý tưởng đầu tiên, liên quan đến quản lý trạng thái, chúng ta sẽ xem xét thông qua ví dụ về một bộ đếm thông thường sử dụng state trong 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>
	)
}

Trong đoạn mã này, chúng ta thấy state cho biến count - đây là nguồn chân lý cho bộ đếm. Tiếp theo, chúng ta thấy hành động (action) - một sự kiện, mà khi người dùng nhấp chuột sẽ kích hoạt cập nhật state. Và cuối cùng, giao diện (view), nhờ nó chúng ta hiển thị giao diện người dùng.

Như vậy sơ đồ khá đơn giản: nút được nhấn - state count (State) khi nhấn (Action) thay đổi, do đó giao diện (View) thay đổi - trong trường hợp của chúng ta đó là con số trên màn hình.

Tuy nhiên, mọi thứ sẽ phức tạp hơn nếu chúng ta có nhiều component cần sử dụng chung một state. Tất nhiên, có thể, ví dụ nâng state lên tới các component cha, nhưng giải pháp như vậy không phải lúc nào cũng có thể giải quyết được vấn đề. Redux trong trường hợp này đề xuất chúng ta tạo ra một nơi duy nhất trong ứng dụng, nơi chứa trạng thái toàn cục và các mẫu hành vi nhất định khi cập nhật trạng thái đó. Chính điều này là ý tưởng cơ bản đầu tiên (!).

Ý tưởng thứ hai liên quan đến tính bất biến, tức là tính không thể thay đổi của dữ liệu. Bạn, tất nhiên, nhớ từ JavaScript rằng mảng và đối tượng có thể bị thay đổi. Việc thay đổi dữ liệu trực tiếp trong Redux, cũng như trong các framework khác được coi là một thói quen xấu và có thể dẫn đến những hậu quả khó lường. Do đó trong Redux, các đối tượng và mảng ban đầu của chúng ta phải giữ nguyên tính bất biến, và chúng ta chỉ có thể thay đổi các bản sao của chúng.

Hãy trình bày, ý tưởng cơ bản đầu tiên của Redux là gì.

Hãy trình bày, ý tưởng cơ bản thứ hai của Redux là gì.