ログインなしでお気に入り機能を使いたい

はじめに

簡単なサービスを作っている。
ログインするまでもないシンプルなものだが、お気に入り機能が欲しい。

Reactで永続化あれこれ

ググってみると、まずRecoilを使った例が出てきた。

• ワインデータを元にお気に入り機能を作ってみよう〜recoilとReactフックを使って〜｜nap5｜note

• Next.jsでRecoilの永続化 - Qiita

recoil-persistってやつでできるらしい。

• GitHub - polemius/recoil-persist: Package for recoil state manager to persist and rehydrate store

で、例を見てみると、atomって構造体的なものに対して、recoil-persistの関数を実施するっぽい。

…
import { atom, RecoilRoot, useRecoilState } from 'recoil'
import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

const counterState = atom({
  key: 'count',
  default: 0,
  effects_UNSTABLE: [persistAtom],
})
…

コンポーネント間で状態を見れるらしい。便利そう。

• 【Recoil入門】Atom、useRecoilStateの使い方 - Qiita

使い方には注意らしい。

• Recoil で永続化したら事故りかけた - Qiita

で、似たような状態管理ライブラリで言うと、Jotaiがあるらしい。

• Reactの状態管理ライブラリを比較してベストな選択をしよう！ | Reactおじさんブログ

というか、そもそも永続化をするには、localStorageって汎用的なやつでできるらしい。

• Next.js で useState とローカルストレージ (localStorage) を連動させる｜まくろぐ
• ブラウザにデータを保存する「localStrage」の使い方と実際の使用例 - 株式会社グローバルゲート公式ブログ

これでええやん。

調べてみて

コンポーネント間で状態を共有できるのは便利そう。
Jotaiは日本発らしいし、recoilよりシンプルに書けるらしいので、複雑なことはしない自分には良いのかと。今後使ってみよう。

その他参考文献

• React状態管理ライブラリ Jotai の便利関数の紹介 #JotaiFriends
• Introduction — Jotai