Zustand は、React 用の小型、高速、スケーラブルな状態管理ライブラリであり、Redux のようなより複雑なソリューションの代替として機能します。 Zustand が大きな注目を集めた主な理由は、Redux と比較してそのサイズが小さく、構文が単純であることです。

Zustand のセットアップを理解する

まず、Zustand と TypeScript をまだインストールしていない場合はインストールする必要があります。

npm install zustand
'or'
yarn add zustand

Zustand はストアを定義するための作成機能を提供します。カウント値を保存および操作する基本的な例を見てみましょう。

カスタム フック useCounterStore():
を含む、store.ts というファイルを作成しましょう。

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

この例では:

• count は状態の一部です。

• increaseCount とresetCount は、状態を変更するアクションです。

• setは、Zustandが提供するストアを更新する機能です。

React コンポーネントでのストアの使用

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

ここで、Counter は React コンポーネントです。ご覧のとおり、useCounterState() はカウントとインクリメントにアクセスするために使用されます。

次のように状態を直接取​​得する代わりに、状態を構造化できます。

const {count, increment} = useCounterStore((state) => state)

しかし、このアプローチではパフォーマンスが低下します。したがって、ベスト プラクティスは、前に示したように状態に直接アクセスすることです。

非同期アクション

非同期アクションを作成したり、サーバーに API リクエストを呼び出したりすることも、Zustand では非常に簡単です。ここで、次のコードですべてを説明します。

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

これは JavaScript の一般的な非同期関数のように思えませんか?まず非同期コードを実行し、次に指定された値で状態を設定します。

それでは、反応コンポーネントでそれを使用する方法を見てみましょう:

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

React コンポーネントの外部の状態にアクセスする方法

これまでは、React コンポーネント内の状態にのみアクセスしてきました。しかし、React コンポーネントの外部から状態にアクセスする場合はどうでしょうか?はい、Zustand を使用すると、React コンポーネントの外部から状態にアクセスできます。

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

ここでは、getCount() が getState() によって状態にアクセスしていることがわかります

カウントも設定できます:

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

永続化ミドルウェア

Zustand の永続ミドルウェアは、通常 localStorage または sessionStorage を使用して、ブラウザー セッション間で状態を永続化し、再ハイドレートするために使用されます。この機能を使用すると、ページをリロードした後、またはユーザーがブラウザを閉じて再度開いた後でも、状態を維持できます。仕組みと使用方法の詳細は次のとおりです。

永続化の基本的な使い方

永続化を使用して Zustand ストアをセットアップする方法は次のとおりです:

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

状態はlocalStorageのキー「bear-storage」に保存されます。これで、ページを更新してもクマの数はリロード後も維持されます。

デフォルトでは、persist は localStorage を使用しますが、これを sessionStorage または他のストレージ システムに変更できます。 Zustand での永続状態のトピックについては、取り上げるべきことがたくさんあります。このトピックに関する詳細なチュートリアル/投稿は、この投稿の後に表示されます。

結論

Redux が状態管理ツールとしていかに優れているかは誰もが知っています。しかし、Redux は少々複雑で大規模な定型文を持っています。そのため、ますます多くの開発者が、シンプルで拡張可能な状態管理ツールとして Zustand を選択しています。

それでも、非常に複雑でネストされた状態管理には Redux の方が推奨されることがわかります。