はじめに：Reactの状態、混乱してませんか？
小さなTODOアプリを作ったとき、気づいたら状態を3階層くらい下までpropで渡してて、「え？ なんでこんなに複雑？」って思ったんです。それがReduxとの出会いでした。今ではもう、メッセージを一つの場所で管理できるありがたさに感謝してます。
問題：Reactの状態管理の壁
Reactの「部品ごとに分ける」アーキテクチャは素晴らしい。でもアプリが大きくなるにつれ、状態の管理が爆発的に難しくなるんですよね。私は一度、親コンポーネントに全状態を集めたことがあるんですけど、それが逆にコネクション（リンク）の断絶を生む原因になって…。Reduxが救世主でした。
Reduxの基本用語（カジュアル解説）
- Store: アプリ全体の状態を持つ1か所の箱みたいなもの。
- Action: 「なにが起こったか」を伝えるJavaScriptオブジェクト。
- Reducer: Actionを見て「じゃあ状態はこう変えよう」と判断する関数。
- Dispatch: Storeに「こんなこと起こったよ！」って知らせる方法。
- Selector: 必要な部分だけ取り出す賢い関数。
実装ステップ（コードで理解しよう）
パッケージのインストール
npm install redux react-redux
ストアの作成
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
Reactにストアを提供
import { Provider } from 'react-redux';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
アクションの定義
const increment = () => ({
type: 'INCREMENT'
});
const addTodo = text => ({
type: 'ADD_TODO',
payload: text
});
リデューサーの作成
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
コンポーネントとの接続
import { connect } from 'react-redux';
const mapStateToProps = state => ({
count: state.counter
});
const mapDispatchToProps = dispatch => ({
onIncrement: () => dispatch(increment())
});
export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
セレクターの活用
const getCompletedTodos = (state) =>
state.todos.filter(todo => todo.completed);
実例：To-Do アプリの状態管理
複数のコンポーネントがタスクのリストを読み書きするアプリを想像してみてください。Reduxを使えば、タスクを一元的に保管して、どのコンポーネントからでも読み書きできます。propのバケツリレーとはおさらば！
Reduxを使うと得られるもの
- 🎯 予測可能な状態：状態の流れが明確だから、バグの原因も追いやすい。
- 🛠 開発ツールの強力さ：Redux DevToolsで状態の変化を時間軸で追える。
- 🔧 コードのメンテしやすさ：処理の役割がはっきりしてて、後からでも読みやすい。
- 🚀 スケーラビリティ：アプリが大きくなってもReduxなら耐えられる。
まとめ
Reactアプリが少しずつ成長していくとき、その状態管理にReduxを取り入れるだけで本当に楽になります。使わない手はないですよ。試してみてください。メッセージがちゃんと届くようになりますから。
おまけリンク：