Reactの状態管理 をもっと効率的に： Redux の真価を知る

Reactの状態管理における課題を解決するために誕生したRedux。この記事では、Reactの標準的な状態管理手法との違いや、Reduxを導入することで得られるメリットをわかりやすく解説します。また、Reduxが登場した背景や、その必要性についても触れつつ、実際のコード例を通して効率的な状態管理の方法を学びます。

Reduxとは何か
Reactだけで十分？Reduxを導入すべきシチュエーション
Reduxのメリットとデメリット
1. メリット
2. デメリット
実装例で学ぶRedux
Redux Toolkitの紹介
Reduxと他の状態管理ライブラリの比較
まとめと今後の展望

Reduxとは何か

Reduxは、JavaScriptアプリケーションのための状態管理ライブラリです。以下の3つの要素で構成されます:

Store: アプリ全体の状態を保持するオブジェクト。
Action: 状態を変更するための命令書。
Reducer: Actionを受け取り、新しい状態を返す純粋関数。

以下はReduxの基本的な構造の例です:


// Action
const increment = () => ({ type: "INCREMENT" });

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

Reactだけで十分？Reduxを導入すべきシチュエーション

Reactのローカル状態管理だけでは対応しきれない場合、Reduxが役立ちます。たとえば:

深くネストしたコンポーネント間で状態を共有する必要がある場合。
複数のコンポーネントが同じ状態にアクセスし、更新する場合。

Reduxのメリットとデメリット

メリット

状態管理が一元化され、予測可能性が向上。
Redux DevToolsを活用したデバッグが可能。
エコシステムが豊富で拡張性が高い。

デメリット

小規模なプロジェクトではオーバーヘッドになりやすい。
従来のReduxでは設定が冗長になる場合がある。

実装例で学ぶRedux

以下はRedux Toolkitを使ったカウンターアプリの簡単な例です:


import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

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

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

// Component
const Counter = () => {
    const value = useSelector((state) => state.value);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>{value}</h1>
            <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
            <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
        </div>
    );
};