Ersetzt TanStack Query Redux, MobX oder andere globale State-Manager?

Nun, fangen wir mit ein paar wichtigen Punkten an

• TanStack Query ist eine **Server-State**-Bibliothek, die für die Verwaltung asynchroner Operationen zwischen Ihrem Server und Client zuständig ist.
• Redux, MobX, Zustand usw. sind **Client-State**-Bibliotheken, die *zum Speichern asynchroner Daten verwendet werden können, wenn auch ineffizient im Vergleich zu einem Tool wie TanStack Query*.

Mit diesen Punkten im Hinterkopf ist die kurze Antwort, dass TanStack Query **den Boilerplate-Code und die zugehörigen Verbindungen, die zur Verwaltung von Cache-Daten in Ihrem Client-State verwendet werden, ersetzt und durch nur wenige Codezeilen ersetzt.**

Für die überwiegende Mehrheit der Anwendungen ist der tatsächlich **global zugängliche Client-State**, der nach der Migration Ihres gesamten asynchronen Codes zu TanStack Query übrig bleibt, normalerweise sehr klein.

Es gibt immer noch einige Umstände, unter denen eine Anwendung eine riesige Menge synchroner, nur clientseitiger Daten haben kann (wie eine visuelle Design- oder Musikproduktionsanwendung). In diesem Fall möchten Sie wahrscheinlich immer noch einen Client-State-Manager verwenden. In dieser Situation ist es wichtig zu beachten, dass **TanStack Query kein Ersatz für das lokale/clientseitige State-Management ist**. Sie können TanStack Query jedoch problemlos mit den meisten Client-State-Managern verwenden.

Hier haben wir einige "globale" Zustände, die von einer globalen Zustandsbibliothek verwaltet werden.

const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

Derzeit speichert der globale State-Manager 4 Arten von Server-States: Projekte, Teams, Aufgaben und Benutzer. Wenn wir diese Server-State-Assets zu TanStack Query verschieben würden, würde unser verbleibender globaler Zustand eher so aussehen:

const globalState = {
  themeMode,
  sidebarStatus,
}

const globalState = {
  themeMode,
  sidebarStatus,
}

Das bedeutet auch, dass wir mit ein paar Funktionsaufrufen von injectQuery und injectMutation jeglichen Boilerplate-Code entfernen können, der zur Verwaltung unseres Serverzustands verwendet wurde, z. B.

• Konnektoren
• Action Creators
• Middlewares
• Reducer
• Lade-/Fehler-/Ergebniszustände
• Kontexte

Wenn all das entfernt wurde, fragen Sie sich vielleicht: **"Lohnt es sich, unseren Client-State-Manager für diesen winzigen globalen Zustand weiterhin zu verwenden?"**

Und das liegt an Ihnen!

Aber die Rolle von TanStack Query ist klar. Es entfernt asynchrone Verdrahtung und Boilerplate aus Ihrer Anwendung und ersetzt sie durch nur wenige Codezeilen.

Worauf warten Sie noch, probieren Sie es gleich aus!