最も単純な状態のチュートリアル

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<CounterStore>((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count + 1 })),
    resetCount: () => set({ count: 0 })
}))

この例では:

• カウントは状態の一部です。

• 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 (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increase Count</button>
    </div>
  )
}

export default Counter;

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

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

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

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

非同期アクション

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

export const useCounterStore = create<CounterStore>((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 の一般的な非同期関数のように思えませんか?まず非同期コードを実行し、次に指定された値で状態を設定します。

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

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

  return (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
      </div>
    </div>
  )
}

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 (
    <div>
      {count}
      <div>
        <button onClick={incrementAsync}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  )
}

ここでは、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<BearState>(
  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 の方が推奨されることがわかります。

以上が最も単純な状態のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。