ホームページ ウェブフロントエンド jsチュートリアル 最も単純な状態のチュートリアル

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

Oct 03, 2024 am 06:27 AM

Simplest Zustand Tutorial

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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の文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

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

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

See all articles