Reduxとは？
Reduxとは、アプリケーションの状態を管理するためのアーキテクチャパターン。
もしくは上記アーキテクチャパターンを実装するためのライブラリ。
どんな状態を管理するのか？
アプリケーション全体を通して共有したい状態を管理する。
アプリケーションによるということは前提として
例えば「ユーザー情報」「認証情報」「UIの状態」「キャッシュデータ」
「アプリケーションの設定」など。
どうやって状態管理するのか？
-
Reduxではstoreと呼ばれる唯一のオブジェクトに
アプリケーション全体で共有したい状態を保存する。 -
storeにある状態を更新するためには一つの方法でのみ
状態を更新することができる。 -
具体的にはactionをstoreが提供するdispatchメソッドを利用して
reducerメソッドに渡すことでのみ更新することができる。
| 名前 | 説明 |
|---|---|
| store | state(状態)が保存されるオブジェクト |
| action | 行う処理の種類が記述されたオブジェクト |
| dispatch | reducerにactionを通知するためのメソッド |
| reducer | 通知されたactionに従ってstateを更新するメソッド |
action
export const login = {
type: 'LOGIN' //actionの種類を定義
}
reducer
import React from 'react'
const isLoginReducer = (state = false, action) => {
//actionの種類がLOGINだった場合はstateを反転させて更新
return action.type === 'LOGIN' ? !state : state
}
export const isLoginReducer
store
import { createStore } from 'redux'
//reducerからstoreを作成
const store = createStore(isLoginReducer)
dispatch
import { useDispatch, useSelector } from 'react-redux';
import { login } from './actions';
function App() {
//dispatchの準備
const dispatch = useDispatch()
//storeからstateを参照
const isLogin = useSelector(state => state.isLogin)
return (
<div className="App">
//stateの値によって表示を切り替える
{ isLogin ? <h3>Login中</h3> : <h3>未Login</h3> }
//イベントが発火したらdispatchでactionを通知
<button onClick={() => dispatch(login())}>LOGIN</button>
</div>
);
}
export default App;
Reduxを利用するメリット
-
コンポーネントからの「状態」へのアクセスの容易さ
Reactだけでは複数のコンポーネントで同じ状態を共有したりネストが深い場合
propsによるバケツリレーが発生し、データの受け渡しが複雑になる。
Reduxでは単一のstoreがアプリケーション全体で共有したい「状態」を管理しているので、
各コンポーネントから直接アクセスできるようになる。 -
コードの可読性向上
Reduxはactionがdispatchされ、それに応じてstore内の状態が変更されるという、
単純なデータフローのため、コードの可読性やテストの容易性が向上し、状態の変更を把握しやすくなる。 -
ミドルウェアの導入による拡張性の向上
Reduxでは、ミドルウェアを導入することで、アクションのディスパッチと状態の変更の間に
カスタム処理を挟むことができる。
このため、非同期処理やロギング、ルーティングなどの機能を拡張することができる。