何をするか?
ここでは、React の Context オブジェクトにセットした値をローカルストレージに保存し、次回のアプリ起動時にそこから値を復帰させる方法を説明します。 Context の使い方の基本は、次の記事を参照してください。
Context の実装
下記の UserContext.tsx
モジュールでは、React.createContext()
で UserContext
というオブジェクトを作成しています。
このオブジェクトは、gitHubToken
という文字列データと、その値を更新するための setGitHubToken
関数を保持しています。
次のように実装することで、UserContext
のデータをローカルストレージと同期させることができます。
gitHubToken
の初期値にlocalStorage.getItem()
から取得した値を設定するsetGitHubToken
の呼び出し時にlocalStorage.setItem()
で値を保存する
import * as React from 'react';
// UserContext が保持する値の型
export interface UserContextType {
gitHubToken: string;
setGitHubToken: (token: string) => void;
}
// ローカルストレージ用のキー
const KEY_GITHUB_TOKEN = 'gitHubToken';
// UserContext の生成
export const UserContext = React.createContext<UserContextType>({
gitHubToken: localStorage.getItem(KEY_GITHUB_TOKEN), // デフォルト値
setGitHubToken: (token: string) => {} // ダミーセッター
});
// UserContext にセッター関数を登録するためのコンポーネント
export const UserContextProvider: React.FC = ({children}) => {
const context: UserContextType = React.useContext(UserContext);
const [gitHubToken, setGitHubToken] = React.useState(context.gitHubToken);
const newContext: UserContextType = {
gitHubToken,
setGitHubToken: (token: string) => {
localStorage.setItem(KEY_GITHUB_TOKEN, token);
setGitHubToken(token);
}
};
return (
<UserContext.Provider value={newContext}>
{children}
</UserContext.Provider>
);
};
使用例
上記で作成した、UserContext
を使用するには、上位のコンポーネント (App
コンポーネントなど)に UserContextProvider
を配置し、その子コンポーネントとして UserContext
の Consumer となるコンポーネントを配置します。
ここでは、SignInAndOut
コンポーネント(後で実装)を配置しています。
import * as React from 'react';
import { UserContextProvider } from './UserContext';
import { SignInAndOut } from './SignInAndOut';
export const App: React.FC = () => {
return (
<UserContextProvider>
<SignInAndOut />
</UserContextProvider>
);
};
SignInAndOut
コンポーネントは UserContext
を参照し、Sign In
あるいは Sign Out
のボタンを表示します。
UserContext
に gitHubToken
が設定されている場合は、サインイン済みと判断しています。
import * as React from 'react';
import { UserContext, UserContextType } from './UserContext';
export const SignInAndOut: React.FC = () => {
const ctx: UserContextType = React.useContext(UserContext);
if (ctx.gitHubToken) {
return <>
<button onClick={() => ctx.setGitHubToken('')}>Sign Out</button>
<div>gitHubToken = {ctx.gitHubToken}</div>
</>;
} else {
return <>
<button onClick={() => ctx.setGitHubToken('DUMMY')}>Sign In</button>
</>;
}
};
表示結果は次のようになります。 サインイン後は、トークンの値も表示するようにしています。

Sign In
ボタンを押すと、トークンの値がローカルストレージに保存され、ボタンが Sign Out
に変化します。
この状態で Web ブラウザをリロードすると、ローカルストレージからトークンの値が復元されるため、最初からサインインした状態で表示されます(Sign Out
ボタンが表示されます)。