Soalan Yang Menentukan Stack State Anda
Berhenti membandingkan Redux dengan React Query.
Ia seperti bertanya sama ada anda mahukan tukul atau pemutar skru sebelum anda tahu apa yang ingin dibina. Redux, React Query, dan Zustand semuanya menyelesaikan masalah yang berbeza.
Keputusan sebenar datang daripada satu soalan: Siapakah pemilik punca kebenaran (source of truth) bagi setiap bahagian state?
Anda mempunyai dua jenis kebenaran.
- Kebenaran Milik Sendiri (Owned Truth) Klien adalah puncanya. Ini termasuk perkara seperti:
- Adakah sidebar dibuka?
- Apakah tema semasa?
- Langkah borang manakah yang sedang aktif? State ini hidup dan mati berdasarkan keputusan lokal anda. Ia tidak perlu mengesahkan semula dirinya dengan pelayan (server).
- Kebenaran Pinjaman (Borrowed Truth) Puncanya berada di pelayan. Klien hanya memegang cerminan data tersebut. Data ini berubah tanpa pengetahuan anda. Tugas anda adalah untuk menguruskan:
- Keusangan (Staleness)
- Pembatalan (Invalidation)
- Pengambilan semula (Refetching)
- Penyanggaan (Caching)
Kebanyakan pembangun bergelut kerana mereka menggunakan satu alatan untuk kedua-duanya. Apabila anda cuba menguruskan kebenaran pinjaman dalam reducer di bahagian klien, anda akhirnya menulis semula React Query dengan cara yang lemah. Anda menulis keadaan pemuatan (loading states), pengendalian ralat, dan penyanggaan secara manual. Ini menghasilkan jumlah kod yang tidak perlu dalam jumlah yang besar.
Asingkan mereka untuk berjaya.
Gunakan React Query untuk kebenaran pinjaman. Ia mengendalikan kerja penyelarasan (synchronization) yang sukar. Gunakan Zustand untuk kebenaran milik sendiri. Ia mengendalikan penyimpanan nilai ringkas tanpa protokol yang rumit (zero ceremony).
Jangan masukkan data pelayan ke dalam Zustand. Pastikan sempadan itu jelas.
Bagaimana pula dengan Redux dan Sagas? Sagas bukan untuk pengambilan data. Ia adalah untuk menyelaraskan proses kompleks mengikut masa. Gunakan ia jika aplikasi anda mengendalikan:
- Aliran serentak (concurrent) yang boleh dibatalkan.
- Aliran websocket masa nyata.
- Mesin keadaan (state machines) yang kompleks.
Jika anda menggunakan React Query dan Sagas anda tidak melakukan apa-apa, anda tidak memerlukannya.
Ada jalan ketiga: Penyatuan (Unification). RTK Query dan Redux membolehkan anda menyimpan segalanya dalam satu stor. Ini memberikan anda satu paparan (snapshot) tunggal bagi keseluruhan aplikasi anda. Ini menjadikan penyahpepijatan (debugging), log keluar, dan pengekalan luar talian (offline persistence) jauh lebih mudah.
Pilih jalan anda berdasarkan keperluan anda:
- React Query + Zustand: Terbaik untuk pasukan kecil yang memerlukan kerumitan rendah.
- Redux + Sagas: Terbaik untuk domain keserentakan tinggi seperti aplikasi perdagangan.
- RTK Sahaja: Terbaik untuk pasukan perusahaan besar yang memerlukan satu punca kebenaran tunggal.
Sebelum anda memilih alatan, tanya sama ada state tersebut perlu berada di klien sama sekali. Server Components sedang memindahkan banyak logik ini kembali ke pelayan.
Kenal pasti siapa pemilik kebenaran terlebih dahulu. Alatan akan menyusul kemudian.