【React】Reduxについて

Posted on by masumasu

こんにちわ、masumasuです。

焼けつくように暑い時期ですが、皆様、熱中症にはくれぐれもお気を付けください。

今回は、表題通りReactのReduxについて書いていきます。

Reduxの概要

Reduxは、JavaScriptアプリケーションの状態を一元管理するためのオープンソースライブラリです。

特にReactと組み合わせて使用され、複雑なアプリケーションでの状態管理をシンプルにし、予測可能な状態遷移を実現します。

Reduxの基本原則

単一の状態ツリー
Reduxでは、アプリケーション全体の状態が「ストア」と呼ばれる一つの大きなオブジェクトに格納されます。

これにより、状態の管理とデバッグが容易になります。

状態は読み取り専用
Reduxの状態は不変であり、直接変更することはできません。アクションと呼ばれるオブジェクトをディスパッチ（送信）することで、状態の変更を要求します。

状態の変更は純粋な関数で行う
状態を更新する処理は「リデューサ」と呼ばれる純粋関数で行われ、現在の状態とアクションを受け取り、次の状態を返します。

Reduxの基本構成要素

ストア (Store): アプリケーション全体の状態を保持するオブジェクトです。

アクション (Action): 状態を変更するための意図を示すプレーンなオブジェクトです。

リデューサ (Reducer): アクションに基づいて新しい状態を生成する純粋関数です。

ディスパッチ (Dispatch): アクションをストアに送信するための関数です。

Reduxの実装例

では、具体的な実装例を見てみましょう。

簡単なカウンターアプリを例に、Reduxをどのように使うかを一緒に学んでいきましょう。

1. ストアの作成

まずは、reduxとreact-reduxをインストールし、ストアを作成します。

npm install redux react-redux

次に、ストアの設定を行います。

import { createStore } from 'redux';

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

// リデューサ
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// ストアの作成
const store = createStore(counterReducer);

export default store;

2. アクションの定義

次に、カウンターを増減させるアクションを定義します。

export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

3. ReactコンポーネントでReduxを使用

ReactコンポーネントでReduxのストアとアクションを使用します。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => dispatch(increment())}>増加</button>
      <button onClick={() => dispatch(decrement())}>減少</button>
    </div>
  );
};

export default Counter;

4. アプリケーションにストアを提供

最後に、アプリケーションにストアを提供します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

まとめ

今回は、ReactのReduxについて書きました。

ご覧いただきありがとうございました。