【React Native】Jotaiによってグローバルステートを永続化する

事象

ニュースアプリ開発において、ユーザーがクリップした記事をアプリを閉じたあとも保持する必要がありました。この記事では、Jotaiを使用してグローバルステートを永続化する方法を共有させていただきます。

対処法

以下のコードは、Jotai の atomWithStorage を使用して、クリップした記事の状態を永続化します。createJSONStorage は、AsyncStorage と連携してデータをJSON形式で保存・取得します。Jotai のGitHubディスカッションによると createJSONStorage は型安全ではないため、回避策として、いったん any を指定しております。以下によって生成する clipAtom を必要な箇所にて useAtom によって呼び出します。

clip.ts

import AsyncStorage from '@react-native-async-storage/async-storage';
import { atomWithStorage, createJSONStorage } from 'jotai/utils';

import { Clip } from '../types/clip';

const storage = createJSONStorage<any>(() => AsyncStorage);

export const clipAtom = atomWithStorage<Clip>('clip', [], storage);

npx expo startによってExpoプロジェクトを起動し、XcodeによってiOSを動作確認する際にcommand + Rによって再起動できます。再起動によってアプリの状態がリセットされ、永続化されたデータが正しく読み込まれているかを確認することができます。それによってアプリを閉じたあともクリップした記事が保持されてるかどうか確認できます。

参照

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！