reduxでネストしたデータの扱い方
https://gyazo.com/a2e9aa5a1f0b2b297562bda777d4f5d8
モチベーション
SPAを作ると、どうしてもネストしたデータが出てきてしまう
1. reduxでネストしたデータを書き換えるなら、reducerがネスト地獄になる
2. 取得したデータ = Action.payload と表示したいデータ = someSelector(someState) がそれぞれ食い違ったネスト構造を持つ
1. Immerを使って手続きチックにNextStateを書く
https://github.com/mweststrate/immer
/icons/alert.icon ImmutableJS とやりたいことはほぼ変わらないが、immerのほうが便利そう
CurrentState : 現状態
DraftState 現状態をコピーした一時的な状態
NextState : 次状態
「DraftState」を用意して次状態を書きやすくしてくれる
2. StateをNormalizeしてselectorで表示を整形
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
なるべくStateをフラットに保つ
Redux State TreeをDBのように考える
表示する時はSelectorで整形してやればよい
/icons/alert.icon reduxのstoreからデータ表示整形するには reselect がデファクト
https://github.com/reduxjs/reselect
#ts #redux