De vraag die je state-stack bepaalt
Stop met het vergelijken van Redux met React Query.
Het is alsof je vraagt of je een hamer of een schroevendraaier wilt voordat je weet wat je aan het bouwen bent. Redux, React Query en Zustand lossen allemaal verschillende problemen op.
De echte beslissing komt voort uit één vraag: Wie is de eigenaar van de source of truth voor elk stukje state?
Je hebt twee soorten waarheid.
- Owned Truth De client is de bron. Dit omvat zaken als:
- Is de zijbalk open?
- Wat is het huidige thema?
- Welke stap van een formulier is actief? Deze state leeft en sterft bij je lokale beslissingen. Het hoeft zichzelf niet opnieuw te verifiëren bij een server.
- Borrowed Truth De bron bevindt zich op de server. De client houdt slechts een spiegelbeeld van die data vast. Deze data verandert achter je rug om. Jouw taak is het beheren van:
- Staleness
- Invalidatie
- Refetching
- Caching
De meeste ontwikkelaars worstelen omdat ze één tool voor beide gebruiken. Wanneer je probeert borrowed truth te beheren in een client-side reducer, ben je eigenlijk een slechte versie van React Query aan het herschrijven. Je schrijft handmatig loading states, error handling en caching. Dit creëert enorme hoeveelheden onnodige code.
Splits ze om te winnen.
Gebruik React Query voor borrowed truth. Het regelt het moeilijke synchronisatiewerk. Gebruik Zustand voor owned truth. Het regelt eenvoudige opslag van waarden zonder al te veel poespas.
Dump geen serverdata in Zustand. Houd die grens duidelijk.
Wat dacht je van Redux en Sagas? Sagas zijn niet bedoeld voor data fetching. Ze zijn bedoeld voor het orchestreren van complexe processen over een bepaalde tijd. Gebruik ze als je app het volgende afhandelt:
- Gelijktijdige, annuleerbare flows.
- Real-time websocket-streams.
- Complexe state machines.
Als je React Query gebruikt en je Sagas niets doen, heb je ze niet nodig.
Er is een derde weg: Unificatie. RTK Query en Redux stellen je in staat om alles in één store te houden. Dit geeft je één enkel snapshot van je volledige app. Dit maakt debugging, uitloggen en offline persistentie veel gemakkelijker.
Kies je pad op basis van je behoeften:
- React Query + Zustand: Het beste voor kleine teams die lage complexiteit nodig hebben.
- Redux + Sagas: Het beste voor domeinen met een hoge mate van gelijktijdigheid, zoals trading-apps.
- Alleen RTK: Het beste voor grote enterprise-teams die één enkele source of truth nodig hebben.
Voordat je een tool kiest, vraag je af of de state überhaupt op de client moet leven. Server Components verplaatsen veel van deze logica terug naar de server.
Zoek eerst uit wie de waarheid bezit. De tool volgt vanzelf.