Reduxにおける二つの基本的な考え方

Reduxライブラリの学習を始める前に、その基礎となる二つの基本的な考え方に触れてみましょう。状態管理に関する最初の考え方は、 Reactのステートを使った普通のカウンターの例で見てみましょう：

function Counter() {
	// ステート
	const [count, setCount] = useState(0)

	// アクション:
	function clickHandler() {
		setCount(count + 1)
	}

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

このコードでは、変数 count のためのステートを見ることができます。これはカウンターの真実の源です。次に、アクション（action）があります。これはユーザーのクリックによってステートの更新を引き起こすイベントです。そして最後に、ユーザーインターフェースを表示するためのビュー（view）があります。

したがって、スキームは非常にシンプルです：ボタンが押されると - count ステート（State）が押されたアクション（Action）によって変更され、結果としてビュー（View）が変更されます - この場合は画面上の数字です。

しかし、同じステートを複数のコンポーネントが使用する必要がある場合、すべてがより複雑になります。もちろん、例えばステートのリフトアップを親コンポーネントに行うことができますが、この解決策が常に問題を解決するとは限りません。この場合、Reduxはアプリケーション内のグローバルな状態を保持する単一の場所と、その状態を更新する際の特定の動作パターンを作成することを提案します。これがまさに最初の基本的な考え方です（！）。

第二の考え方は、イミュータビリティ、つまりデータの不変性に関連しています。もちろん、JavaScriptから、配列やオブジェクトは変更可能であることを覚えているでしょう。 Reduxでは、他のフレームワークと同様に、データを直接変更することは悪しき習慣と見なされ、予測不可能な結果を招く可能性があります。そのため、Reduxでは、元のオブジェクトや配列はイミュータブルな状態を保ち、変更できるのはそのコピーのみとされています。

Reduxの最初の基本的な考え方は何か説明してください。

Reduxの二番目の基本的な考え方は何か説明してください。