Redux

Redux を分かりやすく

Redux は、JavaScript アプリケーションの状態を一元管理するためのライブラリです。状態管理とは、ユーザーがアプリケーションとやり取りするときに発生するデータの管理を指します。これは通常、サーバーから取得したデータ、キャッシュデータ、ローカルで生成されたデータなどが含まれます。

例えばあなたが図書館の司書で、全ての本とその位置を管理する立場にあるとします。

1. ストア（Store）: これはあなたの図書館自体になります。図書館（ストア）には多くの本（状態）があり、それらは特定の順番やシステム（リデューサー）に従って整理されています。
2. アクション（Actions）: これは本を借りたり、返したり、新しい本を追加したりする要求です。あなた（ストア）は、これらの要求（アクション）を受けて、本（状態）の整理を行います。
3. リデューサー（Reducers）: これは本をどのように整理するかのルールです。たとえば、新しい本（アクション）が来たとき、それをどの棚に置くべきか（新しい状態を作成）、本が返されたときはどの場所に戻すべきか（状態を更新）などのルールがここに該当します。

Redux の目的は、この図書館の運営を円滑にし、予測可能にすることです。もし本（状態）が図書館全体に散らばってしまったら、特定の本を探すのは大変な労力を必要とします。しかし、全ての本が一元的に管理されていれば、その本を探すのは容易です。このように、Redux はアプリケーションの状態を一元的に管理し、予測可能で、テスト可能で、デバッグ可能な状態に保つことを目指しています。

Redux の歴史的変遷

Redux は、Facebook が開発した React の状態管理問題を解決するために生まれました。2015年に Dan Abramov と Andrew Clark によって作られました。Redux は Elm アーキテクチャのコンセプトを基にしており、それを JavaScript の世界に取り入れました。Redux の設計思想は「すべての状態は単一のストアに格納され、アクションに基づいて更新される」というものです。

Redux と Jamstack の関係

Redux は Jamstack アーキテクチャと組み合わせて使用することで、クライアントサイドの状態管理を強化することができます。Jamstack は JavaScript、API、Markup の略で、静的サイト生成 (SSG) やサーバーサイドレンダリング (SSR) などの技術を活用したモダンなウェブ開発手法を指します。ここで、Redux はクライアントサイドの JavaScript 部分で重要な役割を果たします。

Redux を使うメリット

一元化された状態管理

Redux の最大のメリットは、アプリケーションの状態を一元管理できることです。これにより、状態がアプリケーション全体に散らばることなく、予測可能な形で状態を制御することが可能です。

開発ツールの利用

Redux はデバッグを容易にする豊富なツールを持っています。Redux DevTools は、状態の変化をリアルタイムで視覚的に追跡し、時間を巻き戻すようなデバ

ッグを可能にします。

テストしやすい

Redux のもう一つの特徴は、テストが容易であることです。それぞれの状態変化はアクションによって駆動されるため、アクションとリデューサーは純粋な関数であり、独立してテストすることができます。

Redux を実装

では、Next.js と TypeScript を用いて Redux の基本的な実装を見てみましょう。ここでは、シンプルなカウンターを管理する Redux ストアを作成します。

// store.ts
import { configureStore } from "@reduxjs/toolkit";

const counterReducer = (state = 0, action: { type: string }) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;

// Counter.tsx
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "./store";

const Counter = () => {
  const count = useSelector((state: RootState) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
};

export default Counter;

このコードでは、Redux Toolkit の configureStore を使用してストアを作成し、その中でカウンターの状態を管理する counterReducer を定義しています。その後、useSelector と useDispatch フックを使用してカウンターの状態を読み取り、アクションをディスパッチします。

Redux を学ぶ

Redux の理解を深めるために、以下にいくつかのリソースを紹介します。