Cara untuk mengatasi keadaan Zustand anda.

Dalam artikel ini, kami akan meneroka cara Zustand mendayakan penggantian keadaan dengan fungsi setState, memfokuskan pada ciri menarik: mengatasi keadaan tanpa bergabung. Kami akan menerangkan cara menggunakannya dengan kes ujian mudah.

Memahami Penggabungan Negeri lwn Mengatasi Negeri

Sebelum melihat kod, adalah penting untuk memahami perbezaan antara mencantumkan dan mengatasi keadaan.

• Keadaan Penggabungan: Secara lalai, apabila anda mengemas kini keadaan dalam Zustand (atau React), ia menggabungkan keadaan baharu dengan keadaan sedia ada. Hanya medan yang dikemas kini diubah, manakala negeri yang lain kekal utuh.

• Keadaan Mengatasi: Sebaliknya, mengatasi keadaan menggantikan keseluruhan keadaan dengan objek baharu, membuang mana-mana medan yang terdapat dalam keadaan sebelumnya tetapi bukan sebahagian negeri baharu.

Bila Perlu Mengatasi Negeri

Terdapat situasi yang memerlukan penggantian keseluruhan negeri, contohnya:

• Menetapkan semula keadaan selepas penyerahan borang.

• Menggantikan keadaan sepenuhnya apabila memuatkan set data yang berbeza.

Kes Ujian untuk Mengatasi Negeri Zustand

Berikut ialah kes ujian ringkas daripada pangkalan kod Zustand yang menunjukkan cara untuk mengatasi keadaan menggunakan fungsi setState:

it('can set the store without merging', () => {
  const { setState, getState } = create<{ a: number } | { b: number }>(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Memecahkan Ujian

1. Mencipta Kedai Pertama, kedai Zustand dibuat dengan keadaan awal:

const { setState, getState } = create<{ a: number } | { b: number }>(
    (_set) => ({
      a: 1,
    }),
  )

Keadaan awal ialah objek dengan satu sifat ditetapkan kepada 1. Fungsi cipta mengembalikan dua kaedah penting:

• setState: Kaedah ini digunakan untuk mengemas kini keadaan kedai.

• getState: Kaedah ini mendapatkan semula keadaan semasa kedai.

2. Mengatasi Keadaan Operasi utama di sini adalah untuk menggantikan keadaan semasa, { a: 1 }, dengan keadaan baharu sepenuhnya:

setState({ b: 2 }, true)

• Dengan menghantar bendera sebenar sebagai hujah kedua, Zustand tahu bahawa ia sepatutnya mengatasi keadaan, dan bukannya menggabungkan objek baharu { b: 2 } dengan yang sedia ada. Ini menggantikan sepenuhnya keadaan sebelumnya, jadi { a: 1 } dialih keluar dan keadaan baharu menjadi { b: 2 }.

3. Mengesahkan Penggantian Negeri Akhir sekali, ujian memastikan bahawa negeri telah diganti sepenuhnya:

expect(getState()).toEqual({ b: 2 })

Jangkaan ialah selepas memanggil setState({ b: 2 }, benar), keadaan kedai hanya akan mengandungi { b: 2 } dan tidak lagi mengandungi { a: 1 }.

Cara Zustand Mengatasi Keadaan

Imej di bawah adalah daripada kod sumber Zustand yang menetapkan keadaan.

Seperti yang anda lihat, jika bendera ganti wujud, nextState menjadi keadaan baharu.

(replace ?? (typeof nextState !== 'object' || nextState === null))

Ini adalah cara yang bijak, jika penggantian adalah palsu, yang ia adalah secara lalai, (jenis nextState !== ‘objek’ || nextState === null)) keadaan diperiksa.

Kesimpulan

Zustand menawarkan cara mudah untuk mengurus keadaan dalam React, dan keupayaan untuk mengatasi keadaan sepenuhnya menggunakan setState dengan bendera override memberikan fleksibiliti tambahan. Sama ada anda ingin menetapkan semula borang, memuatkan data baharu atau mengosongkan nilai lama, ciri ini membolehkan anda mengawal sepenuhnya cara keadaan diurus dan dikemas kini dalam aplikasi anda.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Tingkatkan kemahiran pasukan anda dengan kursus lanjutan kami berdasarkan seni bina pangkalan kod. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state

Atas ialah kandungan terperinci Cara untuk mengatasi keadaan Zustand anda.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!