閲覧フラグを使った、表示切り替え機能を実装する
この章のサンプルコード(実装例)
この章で開発する機能のサンプルコードを用意したので、必要に応じて参考にしていただけたらと思います。
day4 「閲覧フラグを使った、表示切り替え機能」のサンプルコード
この章での開発の大まかな流れ
- todosSlice の State に「閲覧フラグ」の値を用意する
- todosSlice の reducer に「閲覧フラグ」の更新機能を追加する
- 「閲覧フラグ」の切り替えを行うコンポーネントを用意して、TodoContainer の子コンポーネントとしてセットする
- 1 で用意した「閲覧用フラグ」と useAppSelector を使って、「全て(削除済みを除く)」「更新済み(削除済みを除く)」「削除済み」を満たす Todo データを取得する
- 「閲覧用フラグ」の値に応じて、TodoList コンポーネントの「削除ボタン」部分の表示を切り替える(「削除ボタン」と「復元ボタン」の切り替え)
info
動作イメージの確認は「サンプルアプリ」でご確認いただけたらと思います。
質問ルール
day4 からの「localStorage を使った、データの保存 & 取得機能を実装する」のページでも書いたとおり、「自己解決力」「自走力」を伸ばす目的も込めて、すぐにわからなくても最低 3 時間は自分自身で調べて自己解決を目指してください。
質問ルールを忘れてしまった場合は、「localStorage を使った、データの保存 & 取得機能を実装する」の「質問ルール」をご確認ください。