導(dǎo)入

狀態(tài)管理はあらゆる React アプリケーションにとって重要ですが、Redux のような従來のライブラリは過剰に感じられることがあります。 React 用の最小限かつ強(qiáng)力な狀態(tài)管理ソリューションである Zustand を紹介します。この投稿では、Zustand が開発者のお?dú)荬巳毪辘摔胜盲皮い肜碛嗓?、React プロジェクトで Zustand を使い始める方法について詳しく説明します。

ズスタンドとは何ですか？

Zustand は、シンプルかつ直観的に設(shè)計(jì)された React 用の狀態(tài)管理ライブラリです。これは軽量で、多くの定型文を必要としないため、Redux や React Context API よりも使いやすくなっています。 React アプリケーションで Zustand を使用する方法を見てみましょう。

React で Zustand をセットアップする

• Zustand をインストールする
  

  npm install zustand
  

• ストアを作成する
  Zustand でストアを作成する方法の簡単な例を次に示します:
  

  import {create} from 'zustand';
  
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }));
  

• コンポーネントでのストアの使用
  次に、React コンポーネントでストアを使用してみましょう:
  

  import React from 'react';
  import { useStore } from './store';
  
  const Counter = () => {
    const { count, increase, decrease } = useStore();
  
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
      </div>
    );
  };
  
  export default Counter;
  

Zustand の高度な機(jī)能: get、getState

• Zustand は他にも 2 つの便利な関數(shù)、get と getState を提供します。これらは狀態(tài)を取得し、任意の時(shí)點(diǎn)での狀態(tài)を取得するために使用されます

getState(): この関數(shù)は、再レンダリングをトリガーせずにストアの現(xiàn)在の狀態(tài)を取得します。

import {create} from 'zustand';

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

// Accessing the current state using getState()
const count= useStore.getState().count;

// Reading the current state value
console.log(count); // This will log the current count

// Modifying the state using the actions
store.increase(); // This will increase the count
console.log(store.count); // This will log the updated count

get(): この関數(shù)を使用すると、ストア自體內(nèi)から狀態(tài)に直接アクセスできます。設(shè)定の前後に狀態(tài)を確認(rèn)または変更する必要がある場(chǎng)合に便利です。

import {create} from 'zustand';

const useStore = create((set, get) => ({
  count: 0,
  increase: (amount) => {
    const currentState = get(); // Access the current state using getState()
    console.log("Current count:", currentState.count); // Log the current count
    set((state) => ({ count: state.count + amount })); // Modify the state
  },
})); 

ズスタンドのスライス

• アプリケーションが成長するにつれて、狀態(tài)をより小さく管理しやすい部分に整理することをお?jiǎng)幛幛筏蓼?。ここでスライスが活躍します。スライスは、獨(dú)自のアクションのセットを持つモジュール式の狀態(tài)の一部です。各スライスは獨(dú)自のファイルで定義できるため、コードがよりクリーンで保守しやすくなります。

// counterStore.js
export const createCounterSlice = (set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
});

// userStore.js
export const createUserSlice = (set) => ({
  user: { name: 'John Doe' },
  setName: (name) => set({ user: { name } }),
});

// useBoundStore.js
import {create} from 'zustand';
import { createCounterSlice } from './counterStore';
import { createUserSlice } from './userStore';

export const useBoundStore = create((...a) => ({
  ...createCounterSlice(...a),
  ...createUserSlice(...a),
}));

コンポーネント內(nèi)での使用方法

import { useBoundStore } from './useBoundStore'
const App = () => {
  const { count, increase, decrease, user, setName } = useBoundStore();
}

ズスタンドの永続狀態(tài)

• Zustand の永続ミドルウェアは、狀態(tài)が変更されると自動(dòng)的に localStorage に保存し、ページがリロードされるとそれを再度ロードするため、追加の作業(yè)を必要とせずに狀態(tài)が同じ狀態(tài)に保たれます。

import {create} from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'counter-storage', // The name of the key in localStorage
    }
  )
);

Zustand の API からデータを取得する

• Zustand で API からデータをフェッチするには、ストア內(nèi)に API 呼び出しを処理するアクションを作成し、フェッチされたデータ、読み込み狀態(tài)、およびエラー狀態(tài)で狀態(tài)を更新します。

import {create} from 'zustand';

const useStore = create((set) => ({
  users: [], // Array to store fetched users
  loading: false, // State to track loading status
  error: null, // State to track any errors during API call

  // Action to fetch users from the API
  fetchUsers: async () => {
    set({ loading: true, error: null }); // Set loading state to true and reset error
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      set({ users: data, loading: false }); // Set users data and loading to false
    } catch (error) {
      set({ error: 'Failed to fetch users', loading: false }); // Set error if fetch fails
    }
  },
}));

export default useStore;

以上がZustand を使用した React での狀態(tài)管理の初心者ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。