Zustand を使用すると反応が簡単になります

React はユーザー インターフェイスの構築方法に革命をもたらしましたが、状態管理は依然として課題です。 Redux のような従来の状態管理ソリューションは、複雑で時間がかかる場合があります。 Zustand は、React アプリケーションの状態管理を簡単にする、小型、高速、拡張可能な状態管理ライブラリです。この記事では、Zustand がどのようにして状態管理を簡素化するのか、また、なぜ開発者の間で人気の選択肢なのかについて説明します。また、TypeScript の能力と柔軟性を示すために、TypeScript を使用した例も提供します。

ズスタンドの紹介

Zustand は、シンプルさとパフォーマンスに重点を置いた React 用の最小限の状態管理ライブラリです。状態を作成および管理するための簡単な API を提供し、あらゆる React アプリに簡単に統合できます。 Redux とは異なり、Zustand は定型コードや複雑なセットアップを必要としないため、小規模から中規模のアプリケーションに最適です。

Zustandの主な特徴

1. シンプルな API: Zustand は、状態を作成および管理するためのシンプルで直感的な API を提供します。
2. TypeScript サポート: Zustand には TypeScript サポートが組み込まれており、TypeScript プロジェクトで簡単に使用できます。
3. パフォーマンス: Zustand は、最小限のオーバーヘッドで高速かつ効率的に動作するように設計されています。
4. 柔軟性: Zustand は、サイズや複雑さに関係なく、あらゆる React アプリで使用できます。

Zustand を始めましょう

Zustand の使用を開始するには、npm または Yarn を使用してライブラリをインストールする必要があります:

<code>npm install zustand</code>

または

<code>yarn add zustand</code>

Zustand を使用してストレージを作成する

Zustand を使用してストレージを作成するのは簡単です。 create 関数を使用してストレージを定義し、初期状態とその状態に対して実行する操作を指定します。

例: 基本的なカウンターストレージ

ZustandとTypeScriptを使って簡単なカウンターストアを作成してみましょう。

import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

export default useCounterStore;

この例では、CounterState インターフェースを定義して、状態の形状と実行するアクションを指定します。次に、create 関数を使用してストレージを作成し、初期状態と操作を返す関数を渡します。

コンポーネント内のストレージを使用する

ストレージができたので、それを React コンポーネントで使用できます。 Zustand は、ストレージ内の状態と操作にアクセスできるようにする useStore と呼ばれるフックを提供します。

import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

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

export default Counter;

この例では、useCounterStore フックを使用して、ストレージ内の count、increment、および decrement プロパティにアクセスします。次に、これらのプロパティを使用して現在のカウントを表示し、カウントを増減するボタンを提供します。

高度な状態管理には Zustand を使用します

Zustand は単純な状態管理だけを目的としたものではありません。また、入れ子状態、派生状態、非同期操作などのより複雑なシナリオも処理できます。

例: ネストされた状態を含む To-Do リスト

より複雑な例、つまりネストされた状態を含む To Do リストを作成してみましょう。

<code>npm install zustand</code>

この例では、To-Do 項目の形状を指定する Todo インターフェイスと、状態の形状と実行するアクションを指定する TodoState インターフェイスを定義します。次に、create 関数を使用してストレージを作成し、初期状態と操作を返す関数を渡します。

コンポーネント内の To Do ストレージを使用する

ToDo ストレージができたので、それを React コンポーネントで使用できます。

<code>yarn add zustand</code>

この例では、useTodoStore フックを使用して、ストレージ内の todos、addTodo、toggleTodo、および removeTodo プロパティにアクセスします。次に、これらのプロパティを使用して To Do リストを表示し、To Do 項目を追加、切り替え、削除するための入力とボタンを提供します。

非同期操作には Zustand を使用します

Zusand は非同期操作もサポートしているため、データのフェッチやその他の非同期操作を簡単に処理できます。

例: API からデータを取得

そこからデータを取得して Zustand ストレージに保存する例を作成してみましょう。

import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

export default useCounterStore;

この例では、DataState インターフェースを定義して、状態の形状と実行するアクションを指定します。次に、create 関数を使用してストレージを作成し、初期状態を返す関数と fetchData オペレーションを渡します。

コンポーネントでデータ ストレージを使用する

データ ストアができたので、それを React コンポーネントで使用できます。

import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

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

export default Counter;

この例では、useDataStore フックを使用して、ストレージ内の data、loading、error、および fetchData プロパティにアクセスします。次に、これらのプロパティを使用してデータ項目のリストを表示し、読み込みとエラーのステータスを処理します。

結論

Zustand は、React アプリケーションの状態管理を簡単かつ効率的に行う、強力で柔軟な状態管理ライブラリです。 Zustand は、シンプルな API、組み込みの TypeScript サポート、パフォーマンスの最適化を備えており、小規模から中規模のアプリケーションに最適です。単純なカウンターを構築する場合でも、複雑な ToDo リストを構築する場合でも、API からデータを取得する場合でも、Zustand が対応します。

Zustand を活用することで、状態管理を簡素化し、定型コードを削減し、優れたユーザー エクスペリエンスの構築に集中できます。次の React プロジェクトで Zustand を試して、開発プロセスがどのようにスムーズで楽しいものになるかを確認してください。

コーディングを楽しんでください!

以上がZustand を使用すると反応が簡単になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。