メインコンテンツまでスキップ

閲覧フラグを使った、表示切り替え機能を実装する

この章のサンプルコード(実装例)

この章で開発する機能のサンプルコードを用意したので、必要に応じて参考にしていただけたらと思います。

day4 「閲覧フラグを使った、表示切り替え機能」のサンプルコード

この章での開発の大まかな流れ

  1. todosSlice の State に「閲覧フラグ」の値を用意する
  2. todosSlice の reducer に「閲覧フラグ」の更新機能を追加する
  3. 「閲覧フラグ」の切り替えを行うコンポーネントを用意して、TodoContainer の子コンポーネントとしてセットする
  4. 1 で用意した「閲覧用フラグ」と useAppSelector を使って、「全て(削除済みを除く)」「更新済み(削除済みを除く)」「削除済み」を満たす Todo データを取得する
  5. 「閲覧用フラグ」の値に応じて、TodoList コンポーネントの「削除ボタン」部分の表示を切り替える(「削除ボタン」と「復元ボタン」の切り替え)
info

動作イメージの確認は「サンプルアプリ」でご確認いただけたらと思います。

質問ルール

day4 からの「localStorage を使った、データの保存 & 取得機能を実装する」のページでも書いたとおり、「自己解決力」「自走力」を伸ばす目的も込めて、すぐにわからなくても最低 3 時間は自分自身で調べて自己解決を目指してください。

質問ルールを忘れてしまった場合は、「localStorage を使った、データの保存 & 取得機能を実装する」の「質問ルール」をご確認ください。