🧙
ZustandとValtioの夢の共演、Zustand-ValtioはImmerの代わりになれるのか
Zustand-Valtioはライブラリ名の名前としてはイマイチと言われてもいるんですが、ひとまずそれはおいておいて、
がそのライブラリです。これは、Zustandのライブラリの位置付けなのでzustandjs配下にあります。
そもそも、私の中では、Zustandはimmutable state用のライブラリで、Valtioはmutable state用のライブラリです。なので、Zustandでimmerを使うのは心理的に合いませんし、そもそも使う必要もないと思っています。ただ、Zustandでimmerを使うのはとても人気があります。
人気があるのだったら、mutable stateの解をZustandにも作れば良いのかと、お試しで始めたのちに、ライブラリ化したのがZustand-Valtioです。現在v0.4.0なのですが、だいぶ面白い感じに仕上がっています。
典型的な使い方はこちら。
import { create } from 'zustand';
import { withProxy } from 'zustand-valtio';
const useCounterState = create(withProxy({
count: 0,
inc() {
this.count++;
},
}));
const Counter = () => {
const count = useCounterState((state) => state.count);
const inc = useCounterState((state) => state.inc);
return (
<>
<div>Count: {count}</div>
<button type="button" onClick={inc}>+1</button>
</>
);
};
この書き方の素晴らしいのは型推論が自然とできることです。個人的にはthisは避けるというのを基本スタンスとしてきているのですが、これは便利と思いました。
まあ、Valtioユーザからしたら、なんでこんな回りくどいことをするのだという気持ちになるのですが、Zustandユーザからすると、これは一つの選択肢になりうるのではないかと思った次第です。
あなたはどっち派ですか？ Bear Zustand派、Zustand+Immer派、Valtio派、Zustand-Valtioいいかも派。
関連記事はこちら。
Discussion