Reactでの状態管理
解決したいこと
Reactで状態管理の設計に困っています。例えば以下のような状態を管理したいとします。
扱うモデル(?)
School //学校
->Grade //学年
->->Class //学級
->->Student //生徒
各モデルの保持する値(フィールド)
School(name, location)
Grade(name)
Class(name, teacher)
Student(name, old)
念のため言葉で説明すると、「複数のSchoolがあって、Schoolの中にGradeが複数あって、Gradeの中にClassが複数あって...」となっています。
・ReduxやRecoilなどでこれをグローバルに保持したい
・ClassやStudent(下の階層のもの)は追加・削除・内容変更を含め更新が多い。
（以下、状態管理ライブラリにReduxを選んだとして話を進めます。）
この時どのような構造で状態管理を保持すると良いと思いますか？
自分で考えたのは次の2パターンです。
1 すべてのオブジェクトを1つのStoreで管理
具体的にはStoreのState が以下のようになります。
Store:{
schools:[
{ //School Object
name:"A high school",
location: "X県x市",
grades:[
{ //Grade Object
name:"grade 1",//1年生
classes:[
{ //Class Object
name:"1-A",
teacher:"ころせんせー",
students:[
{ //Students Object
name:"N村 N男",
old: 15,
},
.....
]
},
.....
],
},
.....
],
},
.....
],
}
問題点
意味的にはシンプルで分かりやすいですが、1つのStudentのnameを変更するたびに全体が更新されるため、パフォーマンス的に最悪です。
2 オブジェクト一覧を作ってIDで管理
具体的にはStoreのState が以下のようになります。
Store:{
schools:{
"SchoolId-0":{
name:"",
location:"",
grades:["GradeId-0","GradeId-1","GradeId-2"]
},
.....
},
grades:{
"GradeId-0":{
name:"1-A",
classes:["ClassId-0","ClassId-1"]
},
},
classes:{
name:"1-A",
teacher:"ころせんせー",
studentes:["StudentsId-0","StudentsId-1","StudentsId-2"],
},
students:{
name:"N村 N男",
old:15,
},
}
問題点
意味的にはシンプルで分かりやすいですが、1つのStudentのnameを変更するたびに全体が更新されるため、パフォーマンス的に最悪です。
（上の2つの例以外にもあればお教えください。）
どのように管理すればいいでしょうか？
0
