【React】状態管理ライブラリ「Recoil」の使い方まとめ
2023/2/3
2023/2/3
今回は、Reactの状態管理ライブラリ「Recoil」の使い方を簡単にまとめたメモです。
Next.jsでの使い方やTypeScrpitの型宣言の方法などもわからなかったので調べた内容をメモしています。
目次
0）ライブラリをインストールする
$ npm install recoil1）AppファイルにRecoilRootを追加する
import { RecoilRoot } from 'recoil';
function MyApp({Component, pageProps}) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
)
}
export default MyApp2）Atomを作成する
import { atom } from "recoil";
const textState = atom({
key: 'textState', // key名（他のatomのkeyと被らないように）
default: '', // デフォルト値
});このatom()で作成したデータ（Atom）は、アプリケーション内で読み書きができるようになります。（コンポーネント間でも共通の状態管理ができる）
3）Atomを使用する
const ['text', 'setText'] = useRecoilState(textState);使いたいコンポーネント内でuseRecoilState(xxx)を使用すると、useState()と同じように使えるようになります。同じように別のコンポーネントで利用するとそのデータの受け渡しもできます。
おまけ：Atomを定義するファイル場所（Next.jsの例）
atom()をどこで記載すればいいかわからなかったので、調べてみるとこの2パターンをよく見かけました。
⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）
my-app/
├─ atoms/
│ └─ atoms.js ← ここにatomを定義する
│
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.jsまた他に、atomごとにファイルを分けて管理したり、フォルダ名がstates/だったりしているのも見かけました。
⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）
my-app/
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js ← ここにatomを定義する
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.jsまた他にコンポーネント内に記載している方法も見かけました。
おまけ：Atomの型宣言の書き方（TypeScriptの場合）
import { atom } from "recoil";
const textState = atom<string>({
key: 'textState', // キー名（他のatomと被らないように）
default: '', // デフォルト値
});atom<型>と記載することで、データの型宣言ができます。
まとめ
selector()やデータを永続化させる方法なども追記したいと思います。レンダリングの
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12