Contextの概要について紹介しました。実際のアプリケーションでは、useContextはuseState・useReducer・関数などと組み合わせて利用することが多いです。そこで今回は具体例を交えてuseContextとの組み合わせ方法について紹介します。ContextはExampleProviderコンポーネントで作成し、以下のようにアプリケーション全体で囲われている前提とします。参考資料useStateと組み合わせるケースContextの作成方法クリックでカウントアップするカウンタアプリケーションは以下のように実装できます。)};上記のように、useStateで取得したStateおよびState更新メソッドをvalueにセットすることでContextとuseStateを組み合わせられます。Contextの利用方法setCount(stateを更新する関数)をContextから受け取り、setCountの処理をコンポーネントに実装することでStateを更新できます。書くのはやめませんかを参考にしてください。関数と組み合わせるケースProviderで定義した関数をContext経由で他のコンポーネントに渡すこともできます。1)を実行する関数とContextを組み合わせた例です。);};Contextの利用方法Contextから受けとった関数を実行することでStateが更新されます。Home;先ほど紹介した「useStateと組み合わせるケース」ではsetCountの実装をContextを利用するコンポーネントで実装する必要がありました。関数とContextを組み合わせることにより、Contextを利用するコンポーネントはStateの更新ロジックを気にする必要がなくなります。useReducerと組み合わせるケースuseReducerは、より複雑なStateを管理したい場合に利用するuseStateの代替となるHooksです。newStateという型をもつ関数)を受け取り、StateとDispatch関数のペアを返します。Contextと組み合わせることで、StateとDispatch関数がグローバルで扱えます。その結果、Reduxのように「各コンポーネントでActionを実行し、グローバルなStateを取得する」というアプリケーションが実現できます。Contextの作成方法カウンタの値をStateで管理し、値を変更する処理をDispath関数で定義した例について考えます。);};上記のように、useReducerで取得したStateとDispatch関数をvalueにセットすることでContextとuseReducerを組み合わせられます。Contextの型(ここでいうContextType)のプロパティにはStateとDispatch関数を定義します。受け取ったDispatch関数を利用してActionを実行することでStateが更新されます。Home;さいごにTwitter(@nishina555)やってます。書くのはやめませんかRECOMMENDJavaScriptReactTypeScriptツイートシェアはてブ1送るPocket3プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。