Wie sich Redux verändert hat und warum es trotzdem noch in neuen Projekten eingesetzt wird

Erinnern Sie sich noch an die Zeiten, als ein einfacher Redux-Counter das Erstellen von drei separaten Dateien, das Deklarieren eines Dutzends Konstanten und das Schreiben eines großen Switch-Case im Reducer erforderte? Aus diesem Grund kam die Bibliothek bei Tausenden von Entwicklern in Verruf. Aber Redux ist nicht mehr das, was es 2015 war.

Die Entwickler erkannten das Problem rechtzeitig und veröffentlichten Redux Toolkit (RTK). Heute ist es zum Standard für die Arbeit mit der Bibliothek geworden und hat nahezu alles entfernt, wofür Redux zuvor kritisiert wurde.

Warum braucht man überhaupt einen globalen State Manager

In kleinen React-Anwendungen kommt man mit normalem Prop-Passing oder dem eingebauten React Context leicht zurecht. Probleme entstehen, wenn das Projekt wächst. Wenn Daten aus einem Formular gleichzeitig eine Sidebar, den Site-Header und Analytics aktualisieren müssen, wird die Prop-Kette zum Chaos.

Redux speichert den Application State in einem einzigen Objekt (Store). Sie ändern dieses Objekt nicht direkt. Stattdessen dispatchen Sie eine Action, und pure Functions, die Reducer, berechnen den neuen State basierend auf dem alten.

Dieser Ansatz bietet klare Vorhersagbarkeit. Wenn etwas in der Anwendung kaputtgeht, können Sie über Redux DevTools die vollständige Historie der State-Änderungen einsehen und die Zeit zurückspulen, um Benutzeraktionen Schritt für Schritt nachzuverfolgen.

Wie Redux Toolkit das Leben erleichtert hat

Früher musste man bei der Aktualisierung eines einzelnen Felds die Unveränderlichkeit von Objekten manuell verfolgen und umständliche Spreads erstellen.

Redux Toolkit hat Immer eingebaut. Jetzt wird Code inside Reducern so geschrieben, als ob Sie den State direkt mutieren, und die Bibliothek konvertiert dies automatisch in ein sicheres unveränderliches Update.

Schauen wir uns ein einfaches Counter-Beispiel an:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() => console.log(store.getState()))

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

Keine separaten Dateien mit Action-Typen. Die createSlice-Funktion hat sowohl den Reducer als auch die Action-Generatoren für Sie erstellt.

Wann Redux gebraucht wird und wann man besser ohne es auskommt

Der Ersteller der Bibliothek, Dan Abramov, schrieb vor Jahren „You Might Not Need Redux". Dieser Rat ist auch heute noch relevant.

Redux ist in bestimmten Situationen nützlich:

• Es gibt viele Daten, die sich aktiv über die Zeit verändern und in verschiedenen Teilen der Anwendung verwendet werden.
• Die State-Update-Logik ist komplex oder erfordert strikte Sequenzierung.
• Es wird eine bequeme Debugging-Möglichkeit mit einer transparenten Historie aller Events benötigt.
• Viele Personen arbeiten im Team und ein einzelnes klares Datenverarbeitungsmuster wird benötigt.

Wenn Sie eine einfache Anwendung haben, in der Daten nur ein paar Ebenen nach unten weitergereicht werden müssen, lohnt es sich nicht, hier Redux einzubinden. Extra-Abstraktionen werden den Code nur verkomplizieren.

Schnellstart

Der einfachste Weg, ein Projekt aufzusetzen, ist mit Vite und einer fertigen Redux Toolkit und TypeScript-Vorlage:

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Für Next.js gibt es eine fertige Vorlage von Vercel:

npx create-next-app --example with-redux my-app

Wenn Sie die Bibliothek zu einem bestehenden Projekt hinzufügen, reicht es aus, zwei Packages zu installieren:

npm install @reduxjs/toolkit react-redux

Fazit

Der Redux-Core wiegt nur etwa 2 KB. Die Bibliothek hat die Ära des endlosen Boilerplate-Codes längst hinter sich gelassen. In Kombination mit Redux Toolkit erhalten Sie ein strenges und vorhersagbares Tool für das State Management, das in großen Projekten hervorragend funktioniert.