Pertanyaan yang Menentukan State Stack Anda
Berhentilah membandingkan Redux dengan React Query.
Ini seperti bertanya apakah Anda ingin palu atau obeng sebelum Anda tahu apa yang sedang Anda bangun. Redux, React Query, dan Zustand semuanya menyelesaikan masalah yang berbeda.
Keputusan sebenarnya datang dari satu pertanyaan: Siapa pemilik source of truth untuk setiap bagian state?
Anda memiliki dua jenis kebenaran.
- Owned Truth Klien adalah sumbernya. Ini termasuk hal-hal seperti:
- Apakah sidebar terbuka?
- Apa tema saat ini?
- Langkah formulir mana yang sedang aktif? State ini hidup dan mati berdasarkan keputusan lokal Anda. Ia tidak perlu memverifikasi dirinya sendiri ke server.
- Borrowed Truth Sumbernya berada di server. Klien hanya memegang cerminan dari data tersebut. Data ini berubah tanpa sepengetahuan Anda. Tugas Anda adalah mengelola:
- Staleness (Keusangan)
- Invalidation (Invalidasi)
- Refetching (Pengambilan ulang)
- Caching (Penyimpanan cache)
Kebanyakan pengembang kesulitan karena mereka menggunakan satu alat untuk keduanya. Ketika Anda mencoba mengelola borrowed truth dalam sebuah reducer di sisi klien, Anda akhirnya menulis ulang React Query dengan cara yang buruk. Anda menulis secara manual loading states, error handling, dan caching. Ini menciptakan banyak sekali kode yang tidak perlu.
Pisahkan keduanya untuk menang.
Gunakan React Query untuk borrowed truth. Ia menangani pekerjaan sinkronisasi yang sulit. Gunakan Zustand untuk owned truth. Ia menangani penyimpanan nilai sederhana tanpa boilerplate berlebih (zero ceremony).
Jangan menumpuk data server ke dalam Zustand. Jaga agar batasan tersebut tetap jelas.
Bagaimana dengan Redux dan Sagas? Sagas bukan untuk pengambilan data (data fetching). Sagas digunakan untuk mengorkestrasi proses kompleks seiring berjalannya waktu. Gunakan jika aplikasi Anda menangani:
- Alur konkuren yang dapat dibatalkan (cancellable flows).
- Aliran websocket waktu nyata (real-time).
- State machine yang kompleks.
Jika Anda menggunakan React Query dan Sagas Anda tidak melakukan apa-apa, Anda tidak membutuhkannya.
Ada jalan ketiga: Unifikasi. RTK Query dan Redux memungkinkan Anda menyimpan semuanya dalam satu store. Ini memberi Anda satu snapshot tunggal dari seluruh aplikasi Anda. Ini membuat proses debugging, logging out, dan persistensi luring (offline persistence) menjadi jauh lebih mudah.
Pilih jalur Anda berdasarkan kebutuhan Anda:
- React Query + Zustand: Terbaik untuk tim kecil yang membutuhkan kompleksitas rendah.
- Redux + Sagas: Terbaik untuk domain dengan konkurensi tinggi seperti aplikasi trading.
- RTK Only: Terbaik untuk tim perusahaan besar yang membutuhkan satu sumber kebenaran tunggal.
Sebelum Anda memilih alat, tanyakan apakah state tersebut memang perlu berada di sisi klien. Server Components sedang memindahkan banyak logika ini kembali ke server.
Cari tahu siapa pemilik kebenarannya terlebih dahulu. Alatnya akan mengikuti.