Redux Reducerでスマートに初期状態を設定：3つの方法とベストプラクティス
Redux Reducerでストアの初期状態を読み取る
Redux Reducerは、Reduxストア内の状態を更新する関数です。Reducerは、アクションを受け取り、それに応じて新しい状態を返します。新しい状態は、ストア内に保存され、コンポーネントによって使用されます。
初期状態の読み取り
Reducerは、initialStateパラメータを使用して、ストアの初期状態を読み取ることができます。initialStateパラメータは、Reducerが最初に呼び出されたときに渡されるオブジェクトです。
例
const initialState = {
count: 0,
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
この例では、counterReducerは、countプロパティを持つ初期状態オブジェクトを受け取ります。INCREMENTアクションがディスパッチされると、Reducerはcountプロパティを1増やした新しい状態を返します。DECREMENTアクションがディスパッチされると、Reducerはcountプロパティを1減らした新しい状態を返します。
initialStateパラメータを使用しない場合
Reducerは、initialStateパラメータを使用せずに実装することもできます。この場合、Reducerは、アクションが最初にディスパッチされたときに渡されるオブジェクトを使用して初期状態を初期化します。
function counterReducer(state = undefined, action) {
if (state === undefined) {
return { count: 0 };
}
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
この例では、counterReducerは、stateパラメータがundefinedかどうかを確認します。stateパラメータがundefinedの場合、Reducerはcountプロパティを持つ初期状態オブジェクトを返します。stateパラメータがundefinedではない場合、Reducerはアクションの種類に基づいて新しい状態を返します。
- コードがより読みやすくなる
- デバッグが容易になる
- テストが容易になる
initialStateパラメータを使用したReducer
const initialState = {
count: 0,
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
このコードは、initialStateパラメータを使用してストアの初期状態を読み取るReducerの例です。initialStateパラメータは、countプロパティを持つオブジェクトです。
counterReducerは、stateパラメータとactionパラメータを受け取ります。stateパラメータは、Reducerの現在の状態です。actionパラメータは、ディスパッチされたアクションです。
function counterReducer(state = undefined, action) {
if (state === undefined) {
return { count: 0 };
}
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
説明
このコードは、initialStateパラメータを使用せずにストアの初期状態を読み取るReducerの例です。
createStore関数を使用したストアの作成
const store = createStore(counterReducer);
このコードは、createStore関数を使用してストアを作成します。createStore関数には、Reducerを渡す必要があります。
この例では、counterReducerがcreateStore関数に渡されます。これにより、ストアはcounterReducerを使用して状態を更新します。
コンポーネントからのストアへのアクセス
function Counter() {
const count = useSelector(state => state.count);
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>インクリメント</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>デクリメント</button>
</div>
);
}
このコードは、ストアのcountプロパティにアクセスするコンポーネントの例です。
useSelectorフックを使用して、ストアから現在の状態を取得します。useSelectorフックには、状態から値を取得するためのセレクター関数を渡す必要があります。
この例では、state => state.countというセレクター関数が使用されます。このセレクター関数は、ストアのcountプロパティを返します。
countプロパティは、<h1>タグを使用してレンダリングされます。
incrementボタンとdecrementボタンは、dispatch関数を使用してアクションをディスパッチします。incrementボタンがクリックされると、INCREMENTアクションがディスパッチされます。decrementボタンがクリックされると、DECREMENTアクションがディスパッチされます。
const initialState = {
count: 0,
};
function counterReducer(state = initialState, action) {
// ...
}
この例では、initialStateパラメータはcountプロパティを持つオブジェクトです。counterReducerは、stateパラメータにinitialStateオブジェクトのデフォルト値を割り当てます。
利点
欠点
- 特にない
function counterReducer(state = undefined, action) {
if (state === undefined) {
return { count: 0 };
}
// ...
}
- コードが簡潔になる
- テストが難しくなる
上記の方法に加えて、以下の方法でもストアの初期状態を読み取ることができます。
createStore関数のオプションを使用する- カスタムロジックを使用する
createStore関数には、preloadedStateオプションがあります。このオプションを使用して、ストアの初期状態を指定することができます。
const store = createStore(counterReducer, {
count: 0,
});
この例では、createStore関数にpreloadedStateオプションを渡して、countプロパティを0に設定します。
上記の方法で説明した方法を使用せずに、カスタムロジックを使用してストアの初期状態を読み取ることもできます。
const initialState = loadInitialState();
function counterReducer(state = initialState, action) {
// ...
}
この例では、loadInitialState関数を使用して、ストアの初期状態を読み取ります。loadInitialState関数は、ローカルストレージやAPIから初期状態を読み取るなど、任意のロジックを実装することができます。
Redux Reducerでストアの初期状態を読み取るには、さまざまな方法があります。どの方法を使用するかは、個々の要件によって異なります。
- コードが読みやすく、デバッグやテストが容易な場合は、
initialStateパラメータを使用するのがおすすめです。 - コードが簡潔になる場合は、
initialStateパラメータを使用しない方法がおすすめです。 - 特殊な要件がある場合は、
createStore関数のオプションやカスタムロジックを使用することができます。
javascript reactjs redux
