Context Reducer
useReducer
- 以下を実現するReactアプリを実装せよ
- useStateでタスク一覧を定義。TSの型でいう
{title: string; done: boolean}[] - 以下操作をするような関数を定義
- タスクの追加（未完了の状態で）
- タスクのタイトル変更
- タスクの完了/未完了 切り替え
- ステートを画面表示
- 関数をそれぞれ利用するようなUI
- 上記をuseReducerを使って実装せよ
- useReducerのステートはタスク一覧。TSの型でいう
{title: string; done: boolean}[] - useReducerのアクションは以下
- 上記useReducerを使ったアプリに以下機能と画面UIを実装せよ
- タスク削除
- タスク全消去
- 複数タスク選択して削除
- タスク並び順定義して並び順変更
useContext
- 1
- 以下満たすアプリを実装せよ
- 親にコンテキストを定義。値は文字列
- 親にコンテキストのProviderを定義。設定する値はハードコード
- 親のコンテキストのProvider配下に子を定義
- 子でコンテキストの値を画面表示
- 上記アプリの以下タイミングでの以下の実行順を調査せよ
- 2
- 以下満たすアプリを実装せよ
- 親にコンテキストを定義。文字列、文字列変更用関数
- 親に文字列のステートを定義
- 親にコンテキストのProviderを定義。ステートの値と関数を設定する
- 親のコンテキストのProvider配下に子を定義
- 子でコンテキストの値を画面表示
- 上記アプリの以下タイミングでの以下の実行順を調査せよ
useReducerとuseContext
- 1
- useReducerで作成したアプリのステートをContextに置き換えたアプリを実装せよ
- 上記アプリで以下タイミングでの以下の実行順を調査せよ
- 2
- 上記アプリで以下修正を実施せよ
- コンテキストを値と値変更関数群に分割し
- ステートの表示と操作で子コンポーネントに分割
- 上記アプリで以下タイミングでの以下の実行順を調査せよ