valtioを使用し、Reactの外で状態管理を行う

オンラインサロンで、valtioについて学んだので忘れないうちにアウトプット。

valtioとは

Poimandresが開発している状態管理ライブラリの一つ。Poimandresは他にも、jotai、zustandと、3種類の状態管理ライブラリを開発しています。

こちらがGithubになります。 https://github.com/pmndrs/valtio

特徴として、valtioはReactの外で状態を保持します。そのため、コンポーネント外に、コードを記述できます。 また、イミュータブルな関数を使用できる点も特徴です。

実際に使ってみる

まずはインストール

yarn add valtio

以下のコードはreactの外で記述できます。型定義もできます。

import { proxy } from 'valtio';

//状態管理したいオブジェクトをproxyでラップします。
export const state = proxy<{arr: string[]}>({
  arr: [],
});

// 配列に要素を追加
const addItem = (item) => {
  if (!item) {
    return;
  }
  state.arr.push(item)
};

コンポーネント内で、useSnapshotを使用し、stateを表示します。

import { useSnapshot } from "valtio";

const Index = () => {
  const { arr } = useSnapshot(state);

  return <div>{arr}</div>;
};

関数を呼び出して、stateを変更してみます。

const item = ‘apple’ 　//本来なら、フォームで出力した値などをそのまま引数に入れる

~~~
~~~

<button onClick={() => addItem(item)}>追加</button>   // ボタンを押すと、apple が追加される

値を変更することができました。工夫すれば、コンポーネントの中がスッキリして可読性が上がりそうですね。 簡単にしか触ってませんが、状態管理ライブラリの中でも有名なReduxと比べると、記述量が少なすぎて逆に不安になるほどです。

今後は、他の二つのライブラリも触って違いを確かめてみたいと思います。