Zustand Membuat Reaksi Terlalu Mudah

React telah merevolusikan cara kami membina antara muka pengguna, tetapi pengurusan negeri tetap menjadi cabaran. Penyelesaian pengurusan negeri tradisional seperti Redux boleh menjadi rumit dan panjang. Zustand muncul, sebuah perpustakaan pengurusan negeri yang kecil, pantas dan boleh diperluaskan yang menjadikan pengurusan negeri dalam aplikasi React menjadi mudah. Artikel ini akan meneroka cara Zustand memudahkan pengurusan negeri dan sebab ia menjadi pilihan popular dalam kalangan pembangun. Kami juga akan memberikan contoh menggunakan TypeScript untuk menunjukkan kuasa dan fleksibilitinya.

Pengenalan kepada Zustand

Zustand ialah perpustakaan pengurusan negeri minimalis untuk React yang memfokuskan pada kesederhanaan dan prestasi. Ia menyediakan API yang mudah untuk mencipta dan mengurus keadaan, menjadikannya mudah untuk disepadukan ke dalam mana-mana apl React. Tidak seperti Redux, Zustand tidak memerlukan kod boilerplate atau persediaan yang kompleks, menjadikannya sesuai untuk aplikasi bersaiz kecil dan sederhana.

Ciri Utama Zustand

1. API Mudah: Zustand menyediakan API yang mudah dan intuitif untuk mencipta dan mengurus keadaan.
2. Sokongan TypeScript: Zustand mempunyai sokongan TypeScript terbina dalam, menjadikannya mudah untuk digunakan dalam projek TypeScript.
3. Prestasi: Zustand direka untuk menjadi pantas dan cekap dengan overhed minimum.
4. Fleksibiliti: Zustand boleh digunakan dengan mana-mana apl React, tidak kira saiz atau kerumitannya.

Bermula dengan Zustand

Untuk mula menggunakan Zustand, anda perlu memasang perpustakaan menggunakan npm atau benang:

<code>npm install zustand</code>

atau

<code>yarn add zustand</code>

Buat storan menggunakan Zustand

Membuat storan dengan Zustand adalah mudah. Anda mentakrifkan storan menggunakan fungsi create dan nyatakan keadaan awal dan sebarang operasi yang anda mahu lakukan pada keadaan itu.

Contoh: Storan kaunter asas

Mari buat kedai kaunter ringkas menggunakan Zustand dan TypeScript.

<code class="language-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;</code>

Dalam contoh ini, kami mentakrifkan antara muka CounterState untuk menentukan bentuk keadaan kami dan tindakan yang ingin kami lakukan. Kami kemudian mencipta storan menggunakan fungsi create, menghantar fungsi yang mengembalikan keadaan dan operasi awal.

Gunakan storan dalam komponen

Sekarang kami mempunyai storan, kami boleh menggunakannya dalam komponen React kami. Zustand menyediakan cangkuk yang dipanggil useStore yang membolehkan anda mengakses keadaan dan operasi dalam storan.

<code class="language-typescript">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;</code>

Dalam contoh ini, kami menggunakan cangkuk useCounterStore untuk mengakses sifat count, increment dan decrement dalam storan. Kami kemudian menggunakan sifat ini untuk memaparkan kiraan semasa dan menyediakan butang untuk menambah dan mengurangkan kiraan.

Gunakan Zustand untuk pengurusan negeri lanjutan

Zustand bukan sahaja untuk pengurusan negeri yang mudah. Ia juga boleh mengendalikan senario yang lebih kompleks seperti keadaan bersarang, keadaan terbitan dan operasi tak segerak.

Contoh: Senarai tugasan dengan keadaan bersarang

Mari kita buat contoh yang lebih kompleks: senarai tugasan dengan keadaan bersarang.

<code>npm install zustand</code>

Dalam contoh ini, kami mentakrifkan antara muka Todo untuk menentukan bentuk item tugasan kami dan antara muka TodoState untuk menentukan bentuk keadaan kami dan tindakan yang ingin kami lakukan. Kami kemudian mencipta storan menggunakan fungsi create, menghantar fungsi yang mengembalikan keadaan dan operasi awal.

Gunakan storan tugasan dalam komponen

Sekarang kami mempunyai storan yang perlu dilakukan, kami boleh menggunakannya dalam komponen React kami.

<code>yarn add zustand</code>

Dalam contoh ini, kami menggunakan cangkuk useTodoStore untuk mengakses sifat todos, addTodo, toggleTodo dan removeTodo dalam storan. Kami kemudian menggunakan sifat ini untuk memaparkan senarai tugasan dan menyediakan input dan butang untuk menambah, menogol dan memadam item tugasan.

Gunakan Zustand untuk operasi tak segerak

Zusand juga menyokong operasi tak segerak, menjadikannya mudah untuk mengendalikan pengambilan data dan operasi tak segerak yang lain.

Contoh: Dapatkan data daripada API

Mari kita buat contoh di mana kita mendapatkan data daripadanya dan menyimpannya dalam storan Zustand kami.

<code class="language-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;</code>

Dalam contoh ini, kami mentakrifkan antara muka DataState untuk menentukan bentuk keadaan kami dan tindakan yang ingin kami lakukan. Kami kemudian mencipta storan menggunakan fungsi create, menghantar fungsi yang mengembalikan keadaan awal dan operasi fetchData.

Gunakan storan data dalam komponen

Sekarang kami mempunyai stor data, kami boleh menggunakannya dalam komponen React kami.

<code class="language-typescript">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;</code>

Dalam contoh ini, kami menggunakan cangkuk useDataStore untuk mengakses sifat data, loading, error dan fetchData dalam storan. Kami kemudian menggunakan sifat ini untuk memaparkan senarai item data dan mengendalikan status pemuatan dan ralat.

Kesimpulan

Zustand ialah perpustakaan pengurusan negeri yang berkuasa dan fleksibel yang menjadikan pengurusan negeri dalam aplikasi React mudah dan cekap. Dengan API ringkasnya, sokongan TypeScript terbina dalam dan pengoptimuman prestasi, Zustand ialah pilihan terbaik untuk aplikasi bersaiz kecil hingga sederhana. Sama ada anda sedang membina kaunter ringkas, senarai tugasan yang kompleks atau mendapatkan data daripada API, Zustand telah membantu anda.

Dengan memanfaatkan Zustand, anda boleh memudahkan pengurusan negeri, mengurangkan kod boilerplate dan menumpukan pada membina pengalaman pengguna yang hebat. Cuba Zustand pada projek React anda yang seterusnya dan lihat bagaimana ia boleh menjadikan proses pembangunan anda lebih lancar dan menyeronokkan.

Selamat pengekodan!

Atas ialah kandungan terperinci Zustand Membuat Reaksi Terlalu Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!