♻️

Redux入門：状態管理の基本と使い方

に公開
JavaScript
Next.js
React
TypeScript
Redux
tech

はじめに

Reactでアプリを開発していると、コンポーネント間で状態を共有するのが複雑になるという問題に直面します。
この課題を解決するために登場したのが Redux です。
本記事では、Reduxの基本的な考え方と使い方を解説します。

Reduxとは

Reduxは JavaScriptアプリケーションの状態管理ライブラリ です。
状態(state)を一元的に管理し、どのコンポーネントからでもアクセス・更新できるようにします。

https://redux.js.org/

Reduxを使うメリット

  • 状態が一元管理される → どのデータがどこにあるか分かりやすい
  • 動作が明確 → 更新は必ず「アクション → リデューサー → 新しいstate」という流れになる
  • デバッグが容易 → 状態の履歴を追跡できる(Redux DevTools)
  • 大規模開発に向いている → 多数のコンポーネントで状態を共有可能

Reduxの基本構成

Reduxは以下の3つの要素で成り立っています。

  1. Store

    • アプリ全体の状態を保持する場所

  2. Action

    • 状態を更新したいときに発行する「イベントオブジェクト」

  3. Reducer

    • 現在の状態とアクションを受け取り、新しい状態を返す純粋関数

基本的な実装例

storeの作成

import { createStore } from "redux";

// 初期状態
const initialState = { count: 0 };

// Reducer
function counterReducer(state = initialState, action: any) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Store作成
const store = createStore(counterReducer);

export default store;

コンポーネントでの利用

import React from "react";
import { useSelector, useDispatch } from "react-redux";

export function Counter() {
  const count = useSelector((state: any) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}

Redux Toolkitについて

公式が提供する Redux Toolkit(RTK) の利用が推奨されています。
理由は以下の通り：

  • 記述量が減る(冗長なコードを省略できる)
  • Immer.jsによる不可変管理が自動化
  • 非同期処理(createAsyncThunk)を簡単に扱える

例：Redux Toolkitでのカウンター

import { createSlice, configureStore } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1; },
    decrement: (state) => { state.count -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer,
});

export default store;

まとめ

  • Reduxは状態管理を一元化するライブラリ
  • 「Action → Reducer → Store」という流れで状態を更新
  • Redux Toolkitを使うとコードがシンプルになり、実務でも扱いやすい

Discussion