React Context API: 状態を簡単に管理する

React Context API は React のエコシステムでは新しいものではありません。ただし、React の 16.3.0 リリース では API に多くの改善がなされています。これら改善は予想以上のもので、Redux やその他高度な状態を管理するライブラリの必要性が大きく提言されます。本書では、実用的なチュートリアルを通して新しい React Context API が小型の React アプリケーションに対する Redux への必要性をどのように置き換えるかを学んでいきます。

Redux についてのクイックレビュー

React Context API に進む前に、両者を比較できるように Redux についてのクイックレビューをする必要があります。Redux は状態の管理を容易にする JavaScript ライブラリです。Redux は React 自体には結びつきません。世界中の開発者は React や Angular といった人気の高い JavaScript フロントエンド フレームワークと共に Redux を使ってきました。

誤解のないように言うと、本書で言う状態の管理とはシングルページアプリ（SPA）で発生する特定のイベントが発生したときの変更を処理することです。例えば、ボタンのクリックやサーバーから来る非同期メッセージのようなイベントがアプリの状態への変更をトリガーします。

Redux では、特に、次の点をご留意ください。

1. アプリ全体の状態が単一のオブジェクト（別名「頼できる情報源(Source of truth)」）に格納されます。
2. 状態を変更するには、発生する必要があることを説明する actions をディスパッチする必要があります。
3. オブジェクトのプロパティを変更したり、既存の配列を変更することはできません。Redux では、新しいオブジェクトまたは新しい配列に常に新しい参照を返さなければなりません。

Redux についてあまりご存知でない方や詳細を学びたい方は、Redux についての実用的なチュートリアルをご覧ください。

React Context API の導入

React Context API はあらゆるレベルに手動で props を伝えなくても、コンポーネント ツリーを通してデータを送信する方法を提供します。React では、親コンポーネントからその子コンポーネントにプロパティとして送信されることがよくあります。

新しい React Context API を使うことは次の 3 つのステップによって決まります。

1. 初期状態を React.createContext に送ります。この機能は Provider や Consumer と共にひとつのオブジェクトを返します。
2. Provider コンポーネントをツリーのトップで使用し、value と呼ばれるプロパティを承諾させます。この値は何でも構いません。
3. 状態のサブセットを取得するために、Consumer コンポーネントをコンポーネント ツリーにあるプロバイダーの下で使います。

ご覧のように、関係する概念は Redux とはそんなに異なりません。実際、Redux はそのパブリック API の下で React Context API を使用します。ただし、最近 Context API は一般人でも十分使用できるほどその成熟度が高まりました。
(つづく)

この続きは、以下のAuth0ブログで解説しております。

React Context API: 状態を簡単に管理する

Auth0 統合認証プラットフォーム

Auth0はWebアプリやモバイル、APIなどに対して認証・認可のサービスをクラウドで提供している、いわゆるIDaaS (Identity as a Service)ベンダーです。企業がもつWebアプリケーションやAPI, Native Mobile Appなどでユーザー認証や認可、セキュリティを組み込みたいけれでも実装が難しい・・・という方にオススメのソリューションを提供しています。

Githubに様々なプラットフォーム用のサンプルソースを公開

Auth0は今回のチュートリアルで使用したサンプルプログラムをはじめ、様々なプラットフォーム・フレームワーク用のサンプルプログラムをGithubに公開しています。今回紹介したReact Context API以外にも多数のフレームワーク用のソースを公開していますので、お試ししてはいかがでしょうか。
Githubリポジトリ - Auth0

実際にAuth0を利用するには

Auth0のサービスは契約をしなくとも無償で評価(フリートライアル：2２日間)をすることができます。フリートライアルは、Auth0のホームページにアクセスし、画面右上のをクリックするとトライアル登録が行うことができます。ユーザー登録にはGitgubやGoogle, Microsoftアカウントを使用してサインアップすることできますので、試してみてはいかがでしょうか？