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

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

jsxfunction 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では、元のオブジェクトや配列は イミュータブル な状態を保ち、 変更できるのはそのコピーのみとされています。