Redux の使い方

Redux の使い方

1. Redux の基本的な概念

Redux を使うためには、まず以下の基本的な概念を理解することが重要です：

• Store（ストア）：アプリケーションの状態が格納される場所。すべてのデータが一元管理されます。
• Action（アクション）：状態を変更したいときに発行するオブジェクトで、type プロパティと必要に応じて他のデータを含んでいます。
• Reducer（リデューサー）：アクションが発行されると、リデューサーが新しい状態を生成します。これは純粋な関数で、前の状態とアクションを受け取り、新しい状態を返します。
• Dispatch（ディスパッチ）：アクションをストアに送る関数。これを使って状態を更新します。

2. Redux のインストール

まず、React プロジェクトに Redux をインストールします：

npm install redux react-redux

• redux は状態管理のためのライブラリです。
• react-redux は React と Redux を接続するためのライブラリです。

3. Redux ストアの作成

まず、ストアを作成します。ストアは、アプリケーションの状態を管理する中心的な役割を果たします。

// store.js
import { createStore } from 'redux';

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

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

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

export default store;

4. Action の定義

アクションは、状態の更新を表すオブジェクトです。アクションには少なくとも type プロパティを含める必要があります。

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

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

5. React コンポーネントで Redux ストアを使用する

React アプリケーションで Redux のストアを使うために、Provider コンポーネントでストアをラップし、アプリ全体にストアを提供します。

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

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

6. Redux ステートをコンポーネントで接続

React コンポーネントで Redux のステートを使うためには、useSelector を使ってストアからデータを取得し、useDispatch を使ってアクションをディスパッチします。

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

const App = () => {
  // Redux ストアから state を取得
  const count = useSelector(state => state.count);

  // アクションをディスパッチする関数
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;

7. Redux の使い方のまとめ

• Store：状態を格納する場所。createStore を使って作成します。
• Action：状態を変更するためにディスパッチされるオブジェクト。type プロパティを含みます。
• Reducer：状態変更のためのロジック。アクションを受け取り、新しい状態を返します。
• useSelector：React コンポーネント内で Redux の状態を取得するフック。
• useDispatch：アクションをストアにディスパッチするフック。

これで、Redux を使