目次
ズスタンドの紹介
Zustandの主な特徴
Zustand を始めましょう
Zustand を使用してストレージを作成する
例: 基本的なカウンターストレージ
コンポーネント内のストレージを使用する
高度な状態管理には Zustand を使用します
例: ネストされた状態を含む To-Do リスト
コンポーネント内の To Do ストレージを使用する
非同期操作には Zustand を使用します
例: API からデータを取得
コンポーネントでデータ ストレージを使用する
結論
ホームページ ウェブフロントエンド jsチュートリアル Zustand を使用すると反応が簡単になります

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

Jan 22, 2025 pm 12:33 PM

Zustand Makes React Too Easy

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: () =&gt; void;
  decrement: () =&gt; void;
}

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

export default useCounterStore;
ログイン後にコピー
ログイン後にコピー

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

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

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

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

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

  return (
    &lt;div&gt;
      &lt;p&gt;Count: {count}&lt;/p&gt;
      &lt;button onClick={increment}&gt;Increment&lt;/button&gt;
      &lt;button onClick={decrement}&gt;Decrement&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default Counter;
ログイン後にコピー
ログイン後にコピー

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

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

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

例: API からデータを取得

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

import create from 'zustand';

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

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

export default useCounterStore;
ログイン後にコピー
ログイン後にコピー

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

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

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

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

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

  return (
    &lt;div&gt;
      &lt;p&gt;Count: {count}&lt;/p&gt;
      &lt;button onClick={increment}&gt;Increment&lt;/button&gt;
      &lt;button onClick={decrement}&gt;Decrement&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default Counter;
ログイン後にコピー
ログイン後にコピー

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

結論

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

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

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

&#x27; this&#x27; JavaScriptで? &#x27; this&#x27; JavaScriptで? Mar 04, 2025 am 01:15 AM

&#x27; this&#x27; JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles