💡

[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする

2022/10/02に公開

JavaScript

Zustand

tech

useStateと同じ感覚で、グローバルのstoreをかけるので、これが最も使いやすいstore管理なのではないかなと思います。

今まで状態管理で、ReduxとかMobxとか、あれやこれや悩んでいたことが嘘のように一掃される感。

俺はこれを待ってたんだ感がします。すごいライブラリ！

zustand - npm
https://www.npmjs.com/package/zustand

pmndrs/zustand: 🐻 Bear necessities for state management in React
https://github.com/pmndrs/zustand

Code

App.js

import { useStore } from "./store";
import "./styles.css";

export default function App() {
  const countDefault = 1;
  const { count = countDefault, setCount } = useStore();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <h2>count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
      <button onClick={() => setCount(countDefault)}>Reset</button>
    </div>
  );
}

store.js

import create from "zustand";

export const useStore = create((set) => ({
  count: undefined,
  setCount: (value) =>
    set((state) => {
      return { count: value };
    })
}));

codesandbox

記事でコードのせた単純なstoreのもの

下記の画像のような多数のコンポーネント間のstoreの連携

参考

React状態管理ライブラリ Zustandを使ってみた | DevelopersIO

Reactで状態管理初心者でも簡単Zustandの設定方法 | アールエフェクト
https://reffect.co.jp/react/zustand

ZustandとValtioの比較

Zustand: React向け軽量ステート管理ライブラリ - Qiita

なんで、多くの紹介サイトが、store側で、increaseとかdecreaseとか定義しているのかわからないけど
store側では、setCount を定義したらいいのに。

Code

codesandbox

参考

Discussion