2023-11-19

Remix zustandを導入していく

Remixでのステートライブラリの導入

参考資料

Remixドキュメント

https://remix.run/docs/en/main/tutorials/jokes#databa

Zustand ドキュメント

https://www.prisma.io/docs/concepts/overview/what-is-prisma

概要

前回の部分から続きの作成をしていく。

Remixでのステート部分の取り扱いについて。

Zusntandとは

シンプルに管理できる状態管理ライブラリ。

純正のContext APIをより拡張したような感じ。

他のライブラリと比較して大きくなく、純粋にステート管理するだけのライブラリという肌感。

さまざまな競合ライブラリでは存在しているアプリケーション全体でのグローバルステートは管理できない。

そのため簡単にカスタムフックなどでの記述が可能。

またドキュメントで競合のライブラリとの比較もできる。

利用動機

最近、アプリケーション全体でのステートは必要かどうかを考えている。

もちろんあるに越したことはないがあまり必要な場面が想像することができないためオーバースペックになりつつあるだろうと感じる。

特にSSRを多用するアプリケーションなどの場合はレスポンスによるデータを中心に考えていくことが多くなるという観点からページ内でのコンポーネント間のグローバルステートで十分と考える。

そう考えた時にZustandの利用が増えると考えた。

特徴

複雑な設定は不要。

直感的かつ比較的わかりやすくキャッチアップすることが可能。

ただ、巨大なアプリケーションなどでは複雑さの増加につながる可能性があることは歪めない。

Remixでの導入

まずライブラリのダウンロード。

bun i zustand

次に簡単にデザインの調整。

_index.tsx

export default function Index() {
  return (
    <div className="flex justify-center items-center h-screen">
      <h1 className="text-4xl font-bold text-blue-500">Hello, Remix!</h1>
    </div>
  );
}

ストアの作成

個々それぞれのストアの作成をすることが可能。

またフォルダ構成としては app/storeとしてその中で作成していく。

store/count.ts

このように記述して値の変更をページ内で行うことができるようにする。

import { create } from "zustand";

type CountState = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

export const useCountStore = create<CountState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

コンポーネントでの値の利用

作成したStoreフックを呼ぶことによってどこからでも呼び出すことができるようになっている。

やはりPropsがないとすっきりとしている。

components/Counter.tsx

import React from "react";
import { useCountStore } from "~/store/count";

const Counter: React.FC = () => {
  const increment = useCountStore((state) => state.increment);
  const decrement = useCountStore((state) => state.decrement);
  return (
    <>
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={increment}
      >
        Increment
      </button>
      <button
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
        onClick={decrement}
      >
        Decrement
      </button>
    </>
  );
};

export default Counter;

呼び出すのはこれだけ。

これでメソッド自体も利用することができ、簡単に値を変更できる。

_index.tsx

export default function Index() {
  const count = useCountStore((state) => state.count);
  return (
    <div className="flex justify-center flex-col items-center h-screen">
      <h1 className="text-4xl font-bold text-blue-500">Hello, Remix!</h1>
      <p className="text-xl ">Count: {count}</p>
      <Counter />
    </div>
  );
}

このように通常通りに呼び出すだけで簡単に利用することが可能。

そして増加と減少のイベントを発火させることができる。

感想

ドキュメントを見ればわかるがエコシステムの部分でもさまざまなライブラリが存在している。

また記述する際に値の変更などについてはスプレッド構文を利用すればとても完結にさまざまな更新・削除などのアクション関数の作成も容易になると考える。

まだまだこれから使っていくので、必要な時が来たらまた記事にしたい。