Recoil


<p>今回は、<strong>Reactの状態管理ライブラリ「<a href="https://recoiljs.org/">Recoil</a>」</strong>の使い方を簡単にまとめたメモです。</p>



<p>Next.jsでの使い方やTypeScrpitの型宣言の方法などもわからなかったので調べた内容をメモしています。</p>



<ul>
<li><a href="https://recoiljs.org/">https://recoiljs.org/</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">0）ライブラリをインストールする</a></li><li><a href="#1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</a></li><li><a href="#2Atom">2）Atomを作成する</a></li><li><a href="#3Atom">3）Atomを使用する</a></li><li><a href="#AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</a><ul><li><a href="#_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</a></li><li><a href="#_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</a></li></ul></li><li><a href="#AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</a></li><li><a href="#i-2">まとめ</a></li></ul></div>
<h2><span id="i">0）ライブラリをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install recoil</code></pre></div>



<h2><span id="1AppRecoilRoot">1）AppファイルにRecoilRootを追加する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="_app.js" data-lang="TSX" data-line="1,6,8"><code>import { RecoilRoot } from &#39;recoil&#39;;


function MyApp({Component, pageProps}) {
	return (
		&lt;RecoilRoot&gt;
			&lt;Component {...pageProps} /&gt;
		&lt;/RecoilRoot&gt;
	)
}

export default MyApp</code></pre></div>



<h2><span id="2Atom">2）Atomを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="atoms/atoms.js" data-lang="JavaScript"><code>import { atom } from &quot;recoil&quot;;

const textState = atom({
	key: &#39;textState&#39;, // key名（他のatomのkeyと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p>この<code>atom()</code>で作成したデータ（Atom）は、アプリケーション内で読み書きができるようになります。（コンポーネント間でも共通の状態管理ができる）</p>



<h2><span id="3Atom">3）Atomを使用する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-lang="TSX"><code>const [&#39;text&#39;, &#39;setText&#39;] = useRecoilState(textState);</code></pre></div>



<p>使いたいコンポーネント内で<code>useRecoilState(xxx)</code>を使用すると、<code>useState()</code>と同じように使えるようになります。同じように別のコンポーネントで利用するとそのデータの受け渡しもできます。</p>



<p></p>



<h2><span id="AtomNextjs">おまけ：Atomを定義するファイル場所（Next.jsの例）</span></h2>



<p>atom()をどこで記載すればいいかわからなかったので、調べてみるとこの2パターンをよく見かけました。</p>



<h3><span id="_atomsatomsatomsts">⑴ /atomsフォルダ内にまとめて定義する（/atoms/atoms.tsなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="2,3"><code>my-app/
├─ atoms/
│ └─ atoms.js   ← ここにatomを定義する
│
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他に、atomごとにファイルを分けて管理したり、フォルダ名が<code>states/</code>だったりしているのも見かけました。</p>



<h3><span id="_pagespagesindextsx">⑵ /pagesフォルダ内に定義する（/pages/index.tsxなど）</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-line="7"><code>my-app/
├─ components/
│ ├─ header.js
│ └─ footer.js
│
├─ pages/
│ └─ index.js   ← ここにatomを定義する
│
├─ public/
│ └─ favicon.ico
│
├─ ...
├─ package.json
└─ next.config.js</code></pre></div>



<p>また他にコンポーネント内に記載している方法も見かけました。</p>



<h2><span id="AtomTypeScript">おまけ：Atomの型宣言の書き方（TypeScriptの場合）</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="atoms/atoms.ts" data-lang="TypeScript" data-line="3"><code>import { atom } from &quot;recoil&quot;;

const textState = atom&lt;string&gt;({
	key: &#39;textState&#39;, // キー名（他のatomと被らないように）
	default: &#39;&#39;,      // デフォルト値
});</code></pre></div>



<p><code>atom&lt;型></code>と記載することで、データの型宣言ができます。</p>



<h2><span id="i-2">まとめ</span></h2>



<p>selector()やデータを永続化させる方法なども追記したいと思います。レンダリングの</p>



<ul class="references">
<li><a href="https://recoiljs.org/">Recoil</a></li>



<li><a href="https://maasaablog.com/development/frontend/react/3226/">Next.jsにRecoilを導入して、グローバルな状態管理を実装しつつ永続化する</a></li>
</ul>


「Recoil」の記事一覧