3/1-5

useRducerとuseContextを組み合わせる

• useReducerの状態管理は同一コンポーネントだけ
• useContextを使えば状態管理をグローバルにできる

親コンポーネントに処理を書く

• TypeScriptでは型を明示する必要があることに注意(今回は使用しない)
• useContextのcontextファイルは特に変える必要なし
• 値を渡すときは下の階層でも使えるようにわかりやすく命名しなおす。
• 渡された値を処理する

• 値を渡すときは下の階層でも使えるようにわかりやすく命名しなおす。
  • value{{countProvided:count,dispatchProvided:dispatch)}
    • 新名:現在のコンポーネンツ内での名前
    • 複数ある時は{{}}
• 渡された値を処理する
  • const {diipatchProvided}=useContext(AppContext)
    • 渡された値は{}で囲う
    • useContextの構文に入れて使う
  • それ以降はdispatchProvidedとして扱う