react-redux は、React と Redux を統合するための公式ライブラリです。これにより、React コンポーネントは Redux ストアにアクセスし、Redux ストアの状態変更に対応することができます。
1. react-redux と redux のインストール
まず、react-redux と redux をインストールします：
npm install react-redux redux
2. Redux ストアの作成
Redux では、ストアはアプリケーションの状態を保持するオブジェクトです。Redux ストアを作成するためには、リデューサーと初期状態を定義し、createStore 関数を使用してストアを作成します。
リデューサーの定義
リデューサーは純粋関数であり、現在の状態とアクションを受け取り、新しい状態を返します。以下は、簡単なカウンターリデューサーの例です：
// reducers/counter.js
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;
}
};
export default counterReducer;
ストアの作成
createStore 関数を使用して Redux ストアを作成します：
// store.js
import { createStore } from 'redux';
import counterReducer from './reducers/counter';
const store = createStore(counterReducer);
export default store;
3. React アプリにストアを提供
Provider コンポーネントを使用して、Redux ストアを React アプリケーション全体に提供します：
// index.js または App.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')
);
4. コンポーネントで Redux を使用する
関数コンポーネント内で useSelector と useDispatch フックを使用して、Redux ストアの状態にアクセスし、アクションをディスパッチします。
状態の読み取り
useSelector フックを使用して、Redux ストアの状態を読み取ります：
import React from 'react';
import { useSelector } from 'react-redux';
const CounterDisplay = () => {
const count = useSelector((state) => state.count);
return (
<div>
<h1>Count: {count}</h1>
</div>
);
};
export default CounterDisplay;
アクションのディスパッチ
useDispatch フックを使用して、アクションをディスパッチします：
import React from 'react';
import { useDispatch } from 'react-redux';
const CounterButtons = () => {
const dispatch = useDispatch();
const increment = () => {
dispatch({ type: 'INCREMENT' });
};
const decrement = () => {
dispatch({ type: 'DECREMENT' });
};
return (
<div>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default CounterButtons;
5. React Redux の動作原理
1.Redux ストア: Redux ストアは JavaScript オブジェクトで、アプリケーションの全ての状態ツリーを保持します。createStore メソッドで作成します。
2.アクション (Actions): アクションは、何が起こったかを説明するための普通の JavaScript オブジェクトです。各アクションには type プロパティが必要で、その他のプロパティには関連するデータを含めることができます。
3.リデューサ (Reducers): リデューサは純関数であり、現在の状態とアクションを受け取り、新しい状態を返します。リデューサ関数の形式は (state, action) => newState です。
4.アクションのディスパッチ (Dispatching Actions): 状態を更新するには、アクションをディスパッチ (dispatch) する必要があります。store.dispatch(action) によってアクションをリデューサに送り、リデューサはアクションのタイプに応じて状態を更新します。
5.React と Redux の接続: React Redux は Provider コンポーネントと connect 関数（または useSelector と useDispatch フック）を提供し、React コンポーネントを Redux ストアに接続します。
6. 総合的な例
以下は、状態の読み取りとアクションのディスパッチを含む完全な例です：
import React from 'react';
import CounterDisplay from './CounterDisplay';
import CounterButtons from './CounterButtons';
const App = () => {
return (
<div>
<h1>My Redux App</h1>
<CounterDisplay />
<CounterButtons />
</div>
);
};
export default App;
import React from 'react';
import { useSelector } from 'react-redux';
const CounterDisplay = () => {
const count = useSelector((state) => state.count);
return (
<div>
<h1>Count: {count}</h1>
</div>
);
};
export default CounterDisplay;
import React from 'react';
import { useDispatch } from 'react-redux';
const CounterButtons = () => {
const dispatch = useDispatch();
const increment = () => {
dispatch({ type: 'INCREMENT' });
};
const decrement = () => {
dispatch({ type: 'DECREMENT' });
};
return (
<div>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default CounterButtons;
参考リンク：
https://react-redux.js.org/