前回は、どのようなStateをグローバルで管理するべきかについて考えました。
では、グローバルStateとして管理すると決めたら、どのように設計すればよいのでしょうか。
Reduxでは複数のコンポーネントから同じStateを参照できます。
これは便利な反面、本来別々に管理すべき状態まで共有してしまうと、思わぬバグにつながることがあります。
今回は、一覧画面を例にReduxのState設計について考えてみます。
例えば一覧画面で
次のような一覧があるとします。
ユーザーA ✏️ 年齢 性別 好きな食べ物
ユーザーB ✏️ 年齢 性別 好きな食べ物
ユーザーC ✏️ 年齢 性別 好きな食べ物
鉛筆ボタンを押すと、そのユーザーの編集画面を表示します。
例えば一覧画面全体で、「現在選択しているユーザー（selectedUser）」と「読み込み中かどうか（isLoading）」だけを1つずつ管理しているとします。
Redux Store
selectedUser
→ 現在選択されているユーザー
isLoading
→ ユーザー情報を取得中かどうか
この場合、ユーザーA（✏️）をクリックしてAPI通信中に、ユーザーB（✏️）をクリックするとどうなるでしょうか。
Aをクリック
↓
selectedUser = A
↓
API通信開始
↓
Bをクリック
↓
selectedUser = B
↓
AのAPI通信完了
この場合、Aのために取得したデータなのに、現在のselectedUserはBという状態が発生する可能性があります。
Stateの共有範囲を考える
Reduxを使えば、どこからでも同じStateを参照できます。
しかし、ただ単純に複数コンポーネントから全て同じstateを使うだけでは設計的に破綻してしまいます。
重要なのは、そのStateが何を表しているのかを考えることです。
例えば、
一覧全体のローディング
なのか、
ユーザーAのローディング
ユーザーBのローディング
なのかでは、Stateの設計が変わります。
Reduxは、ライブラリの使い方だけではなく、Stateの共有範囲を適切に決めることが重要になります。