【React】状態管理ライブラリ「Recoil」の使い方まとめ
2023/2/3
2023/2/3
今回は、Reactの状態管理ライブラリ「Recoil」の使い方を簡単にまとめたメモです。
Next.jsでの使い方やTypeScrpitの型宣言の方法などもわからなかったので調べた内容をメモしています。
目次
0)ライブラリをインストールする
$ npm install recoil
1)AppファイルにRecoilRootを追加する
import { RecoilRoot } from 'recoil';
function MyApp({Component, pageProps}) {
return (
<RecoilRoot>
<Component {...pageProps} />
</RecoilRoot>
)
}
export default MyApp
2)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()やデータを永続化させる方法なども追記したいと思います。レンダリングの
最近の記事
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Supabase + JavaScript】よく使う処理まとめ
最近、JavaScript(Next.js)とSupabaseでWEBサイトを作り始めました!
そこで今回は、JavaScriptでSupabaseを使う際のよく利用する処理をメモとして記載し...
2023/5/24
2023/5/24
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
AI画像生成「Stable Diffusion」をGoogle Colaboratoryで実行する方法メモ
目次1)Stable Diffusion WEB UIのGitHubを開く2)使いたいモデルを選ぶ3)Google Colaboratoryを実行する4)WEB UIのページを開く5)画像生...
2023/5/20
2023/5/20
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】Googleタグマネージャの設定方法。
Next.js 13でGoogle Tag Managerを設定する方法を調べてみました。
とりあえずは動く処理ができたので、その方法をメモしておきます。
目次今回編集するファイルファイ...
2023/5/15
2023/5/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
Next.js 13のアプリ作成時に聞かれる質問まとめ
Next.js 13で新しいアプリケーションを作成する際、はじめにいくつかの質問に答えることが求められます。
この記事では、その質問の内容と解説をメモしていきます!また今回内容がわからなかった...
2023/5/6
2023/5/25
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】DjangoのAPIで記事のタグを更新したい
DjangoのAPIを使って、Next.jsからデータを新規作成や更新する時に、同時に関連データ(ManyToMany)も変更したい。
今回は「記事(Post)」を新規作成/更新して、その記事...
2023/2/15
2023/2/15
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【GAS】複数スプレッドシートを一括CSVダウンロードする
複数のスプレッドシートをCSVファイルにしてダウンロードしたい時に、1シート毎にcsvダウンロードをしていくのが大変だったので、少し楽にできる方法を調べてみました。
今回は、そんな複数スプレッ...
2023/2/13
2023/2/13