Recoilを使うぞ

こんにちは、フレームワークはReactが一番好きなフロントエンジニアです。
最近初めてRecoilに触れたところ、圧倒的使いやすすぎてReduxが使えなくなってしまいました。そんな便利なRecoilについて、今更ですがまとめて置こうと思います。

Recoilとは
ReactやNext.jsで使える状態管理ツール。
全ファイル内で同じ変数を共有出来るので、Propsによる変数バケツリレーが不要になります。Reduxより圧倒的に簡単で、普通にuseStateのように使えます。

◎使用技術

・React(18.2.0)
・Recoil(0.7.4)
・TypeScript

■はじめる

Recoilは始め方も簡単です。インストール→全体をRecoilRootで囲むだけで使えます。

ターミナル or コマンドプロンプト

npm install recoil
または
yarn add recoil

とりあえず使いたい範囲を囲んであげればいいので、index.tsxでもOKです。
Next.jsの場合は_app.tsxにて囲んであげて下さい。

App.tsx(Reactの場合)

import { RecoilRoot } from "recoil";
import { Router } from "./Router";

function App() {
  return (
    <>
      <RecoilRoot>
        <Router />
      </RecoilRoot>
    </>
  );
}

export default App;

_app.tsx(Next.jsの場合)

import { RecoilRoot } from "recoil";

function MyApp( { Component, pageProps } ) {
return (
< RecoilRoot>
　< Component {...pageProps} />
</ RecoilRoot>
);
}

export default MyApp;

これで準備完了です。

■Atomファイルの作成

srcフォルダの中に「atoms」フォルダを作成しましょう。
その中に「XXAtom.ts」を作成してあげます。

◎全体で共有して使いたい変数を設定していく

例として、球の半径の変数(ballRadius)を設定していきます。
初期値は10とします。

src > atoms > BallAtom.ts

/**
 * 球の半径.
 */
export const ballRadiusState = atom({ //このstate名を使って後で取り出す
  key: "ballRadius", //キー名
  default: 10,       //変数の初期値
});

変数は連想配列でも設定可能です。

src > atoms > BallAtom.ts

import { atom } from "recoil";

/**
 * 球の位置.
 */
export const ballState = atom({ //このstate名を使って後で取り出す
  key: "ball", //キー名
  default: {   //変数の初期値
    x: 0,
    y: 0,
  },
});

これだけです。

※TypeScriptを使って変数の型を設定したい場合

球にアニメーションをつけたかったため、canvas変数も用意しました。
型を設定したい場合は「atom」の後ろに<>を記述してあげます。

//キャンバス型
type canvasType = {
  canvas: HTMLCanvasElement | undefined;
  ctx: CanvasRenderingContext2D | undefined;
};

/**
 * キャンバス描画.
 */
export const canvasState = atom<canvasType>({
  key: "canvas",
  default: {
    canvas: undefined,
    ctx: undefined,
  },
});

■別ファイルから変数を読み書きする

読み書きの方法は3種類あります。
useRecoilValue　 ：値の読み込みだけしたい場合に使用
useSetRecoilState：値の書き込みだけしたい場合に使用
useRecoilState　 ：値を読み書きしたい場合に使用

◎読み込みのみ：useRecoilValue

import { useRecoilValue } from "recoil";

//円の半径
const ballRadius = useRecoilValue(ballRadiusState);
console.log(ballRadius); //10

//連想配列の場合：球の位置
const xy = useRecoilValue(ballState);
console.log(xy); //{ x:0, y:0 };

//連想配列から1要素を抜き出すことももちろん可能
const x = useRecoilValue(ballState).x;
console.log(x); //0

◎書き込みのみ：useSetRecoilState

import { useSetRecoilState } from "recoil";

const setBallRadius = useSetRecoilState(ballRadiusState);
setBallRadius(20); //球の半径は10→20に

//連想配列の場合：球の位置
const setXy = useSetRecoilState(ballState);
setXy({ x:10, y:20 }); //連想配列でセットしてあげる

◎読み書きする：useRecoilState

ReactのuseStateみたいに使えます。

const [ballRadius , setBallRadius] = useRecoilState(ballRadiusState);
console.log(ballRadius); //10
setBallRadius(20); //球の半径は10→20に

■まとめ

今回はRecoilの超基本機能についてまとめました。selector等まだまだ別の機能もあるので、もっと色々と取り入れてみたいと思います。
もしこの機能は使うべき！というものがあれば、是非ご教示頂けると幸いです。

ここまでご覧頂きありがとうございました。