Zustand: React のシンプル、高速、スケーラブルな状態管理

Zustand: React 用の小型、高速、スケーラブルな状態管理ソリューション

Zustand は、React 用の最小限で高速かつスケーラブルな状態管理ライブラリです。パフォーマンスとスケーラビリティに重点を置いた状態管理のための、定型文のないシンプルなソリューションを提供することを目的としています。 Zustand は、状態を管理するストアを作成し、状態にアクセスして更新するための単純なフックを提供することで機能します。

ライブラリの名前である Zustand は、ドイツ語で「状態」を意味する言葉に由来しており、React での状態の操作が直感的かつ強力になるように設計されています。 Zustand はそのシンプルさと柔軟性で傑出しており、React アプリケーションのローカル状態とグローバル状態の両方を管理するのに最適です。

---

1.ズスタンドとは

Zustand は、React アプリケーション用の小規模で、偏見のない、リアクティブな状態管理ライブラリです。これは、状態に簡単にアクセスして変更できるようにするフックを備えた柔軟なストアを提供します。 Zustand は特定のアーキテクチャに束縛されていないため、不必要な複雑さを導入することなくグローバルまたはローカルに状態を管理するために使用できます。

Zustand の主な特徴:

• 最小限の API: Zustand にはコード行が非常に少ないシンプルな API があります。
• ボイラープレートなし: Redux とは異なり、Zustand は動作するためにアクションやリデューサーを必要とせず、追加のセットアップも必要ありません。
• ストアベース: Zustand はストアを使用してアプリケーションの状態を管理し、整理と拡張を容易にします。
• React フレンドリー: Zustand は、フックとコンテキスト API を活用して React とスムーズに統合します。

---

2. Zustand の核となるコンセプト

1.ストア

Zustand の

ストア は、アプリケーションの状態を保持する単なるオブジェクトです。 Zustand が提供する create 関数を使用して定義でき、状態を操作するメソッドを含めることができます。

例:

import create from 'zustand';

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

useStore フックは、Zustand の create 関数を使用して作成されたストアです。状態は count に保存され、インクリメントやデクリメントなどのアクションによって状態が変更されます。

2.状態にアクセス中

ストアを作成したら、React コンポーネントで useStore フックを使用して状態を読み取り、変更することができます。

例:

import create from 'zustand';

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

• useStore フックを使用すると、ストアで定義された状態とアクションにアクセスできます。必要な状態とアクションを構造化して、コンポーネント内で直接使用できます。

3.状態を更新中

状態を更新するには、ストアで提供されている set メソッドを使用します。 set メソッドは、現在の状態を取得して新しい状態を返す関数を受け取ります。 Zustand は、変更された状態を使用するコンポーネントの再レンダリングを自動的にトリガーします。

例:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

• インクリメントメソッドは、set 関数を使用して、現在の値をインクリメントすることでカウント状態を更新します。

---

3.ズスタンドのメリット

1.シンプルかつミニマル

Zustand は軽量で非常にシンプルな API を備えているため、あらゆる React アプリケーションで驚くほど簡単に使い始めることができます。ボイラープレート コード、リデューサー、アクション タイプがないため、Redux などの他のライブラリに見られる複雑さを持たずに React で状態を管理するための優れた代替手段となります。

2.スケーラブル

Zustand は複雑なアプリケーションに合わせて簡単に拡張できます。ローカル状態管理 (個々のコンポーネント用) とアプリケーション全体にわたるグローバル状態管理の両方をサポートします。 Zustand は、最小限のオーバーヘッドで大規模でスケーラブルなアプリケーションを処理できるように設計されています。

3.最適化されたパフォーマンス

Zustand は React の組み込みフックとコンテキストを使用して、状態の変更を効率的にサブスクライブし、再レンダリングが必要なコンポーネントのみを更新します。これにより、大規模なアプリケーションでも優れたパフォーマンスが保証されます。

4. TypeScript のサポート

Zustand は優れた TypeScript サポートを備えており、すぐに使えるタイプセーフ ストアとフックを提供します。

5.プロバイダーは必要ありません

一部の状態管理ライブラリとは異なり、Zustand ではアプリケーションにプロバイダーをラップする必要がありません。フックを介して状態に直接アクセスできるため、追加のセットアップを行わずに簡単に使用できます。

6.柔軟で偏見を持たない

Zustand は、いかなるパターンや制限も強制しません。好きなように状態を構築し、Zustand をローカル ストアまたはグローバル ステート マネージャーとして使用できます。これにより、アプリケーションの状態を最適な方法で整理するための完全な柔軟性が得られます。

---

4. Zustand と React の統合

Zustand を React アプリケーションに統合するのは非常に簡単です。 React アプリで Zustand をセットアップするためのステップバイステップのガイドは次のとおりです:

ステップ 1: Zustand をインストールする

Zustand をインストールするには、次のコマンドを実行します:

import create from 'zustand';

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

ステップ 2: ストアを作成する

アプリケーションの状態とアクションを保持するストアを作成します。これは単純なカウンターストアの例です:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

ステップ 3: コンポーネント内のストアを使用する

ストアを作成したので、useStore フックを使用して React コンポーネントの状態とアクションにアクセスできます。

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

• この例では、useStore を使用して現在のカウントとカウントを変更する (インクリメントとデクリメント) メソッドにアクセスします。

ステップ 4: アプリでコンポーネントを使用する

最後に、アプリで Counter コンポーネントをレンダリングできます。

npm install zustand

---

5. Zustand の高度な機能

1.永続状態

Zustand は、localStorage、sessionStorage、またはその他のストレージ メカニズムに状態を​​永続化するためのミドルウェアを提供します。

例:

import create from 'zustand';

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

export default useStore;

• このミドルウェアはカウント状態を localStorage に永続化するため、ページがリロードされた後でも状態が維持されます。

2.複数のストアを組み合わせる

Zustand を使用すると、懸念事項を分離したり、状態のさまざまなスライスを管理したりする場合に、複数のストアを組み合わせることができます。

例:

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

• ここでは、ユーザー データと製品データ用に 2 つの独立したストアがあります。これらをコンポーネントに個別にインポートして使用できます。

---

6.結論

Zustand は、React アプリケーションの状態を管理するための、最小限で柔軟かつパフォーマンスの高いソリューションを提供します。そのシンプルさと拡張性により、小規模と大規模の両方の React アプリにとって優れた選択肢となります。 Zustand を使用すると、フックとリアクティブ パターンを使用することで、開発者は他の状態管理ライブラリのボイラープレートを管理する必要がなく、アプリケーションの構築に集中できます。

小規模なアプリを構築している場合でも、大規模なアプリケーションを構築している場合でも、Zustand は React で状態を管理するための軽量で効率的かつスケーラブルな方法を提供します。

---

以上がZustand: React のシンプル、高速、スケーラブルな状態管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。