Der Redux-Jahresrückblick 2019: React Hooks, Redux Toolkit, TypeScript und ein Styleguide

Der Redux-Jahresrückblick 2019: React Hooks, Redux Toolkit, TypeScript und ein Styleguide

Avatar von Lenz Weber

Das Jahr 2019 neigt sich dem Ende zu und in der React-State-Management-Filterbubble rund um Redux hat sich eine ganze Menge getan. Doch immer schön der Reihe nach …

Anfang des Jahres wurden mit React 16.8 Hooks eingeführt – als Folge dessen sieht der Code, den wir heute schreiben, völlig anders aus als noch 2018 (aber das hatte ich damals bereits prophezeit). Es haben sich eine ganze Menge Hook-Bibliotheken herausgebildet, die Teilaufgaben dessen, was wir früher noch sehr umständlich mit Redux gemacht haben, jetzt elegant mit wenigen Zeilen erledigen.

Zudem ist React Context nun leicht mit Hooks nutzbar. Auch das hat dazu geführt, dass viele Entwickler zumindest in Betracht ziehen, ihre globale State-Management-Lösung über den Haufen werfen. Auch komplett neue State-Management-Bibliotheken, wie z. B. Zustand, wurden veröffentlicht. Außerdem ist mit XState das Konzept der State Machines wieder in den Blick der Entwickler gerückt.

Kurzum: Es wurde eine ganze Menge Staub aufgewirbelt. Es gibt nun eine Menge neuer Konkurrenz für den Platzhirsch Redux und seinen alten Gegenspieler MobX.

Redux

Das hat aber nicht geschadet, ganz im Gegenteil. Das „offizielle“ Redux-Ökosystem scheint nach einigen Jahren des gefühlten Winterschlafs aufgewacht zu sein. Es gab zwar immer wieder Änderungen an den Interna der Implementierung, nicht aber an den APIs an sich.

Die Wahrheit ist: Es hat sich eine Menge getan. Nicht nur an den APIs, sondern auch bei der Kommunikation der Entwickler. Es ist also ein guter Zeitpunkt, das Jahr 2019 zu rekapitulieren.

React Hooks

Während es schon zum Erscheinungsdatum von React 16.8 im Februar erste inoffizielle Bibliotheken (redux-hooks, redux-react-hooks, um nur zwei zu nennen) gab, um Hooks mit Redux zu nutzen, war es um die offizielle react-redux-Bibliothek erst einmal ziemlich lange still.

Das lag nicht etwa daran, dass dem Thema keine Bedeutung zugewiesen wurde. Viel mehr wurden in einer mehrere Monate andauernden, sehr lesenswerten Diskussion verschiedenste APIs und Implementierungsdetails diskutiert. Im Juni 2019 wurde dann Redux 7.1.0 als erste Version mit offiziellem Hooks-Support released.

Redux Toolkit

Über Jahre hinweg war das Motto von Redux sinngemäß: „Wir stellen euch die Tools zur Verfügung, das Ökosystem regelt sich von alleine“. Das hat zu einem Wildwuchs von mehreren hundert Bibliotheken geführt, die alle irgendwie versuchen, Redux einfacher nutzbar zu machen.

Das mag zwar ein Großteil dieser Bibliotheken auf die eine oder andere Art und Weise geschafft haben. Aber egal wie oft Problem X schon gelöst wurde: Man konnte sicher davon ausgehen, dass in den nächsten drei Tagen eine neue Bibliothek das Licht der Welt erblickt, die wieder alles anders macht.

Infolgedessen gab es bis vor kurzem keinen „offiziellen“ Weg, Redux zu verwenden. Ein Entwickler, der sich in seiner eigenen Redux-Codebasis bestens auskennt, kann in der Codebasis eines anderen Teams vor völlig neue Konzepte gestellt werden.

Jetzt in Richtig

Um diese Situation in den Griff zu bekommen, hat Mark Erikson, der aktuelle Maintainer von Redux, bereits im März 2018 die Entwicklung von Redux-Toolkit (damals noch Redux-Starter-Kit) begonnen. Anfang 2019 wurde das Projekt nach TypeScript portiert und Ende Oktober als Version 1.0 released. Gegenwärtig sind wir bei Version 1.1. Wer die ganze Geschichte nachlesen möchte, kann das im Blog von Mark Erikson tun.

Kurz zusammengefasst stellt RTK viele Helfer zur Verfügung, die Boilerplate-Code massiv reduzieren und (für TypeScript-Entwickler) die Typsicherheit massiv verbessern.

Zudem wird mit dem Konzept des slice auch das über die Zeit in der Community aufgekommene „ducks“-Pattern offiziell empfohlen.

Allgemein ist Redux mit Redux Toolkit als offizieller Bibliothek deutlich mehr opinionated als früher – man könnte sagen, Redux Toolkit ist für Redux das, was MobX StateTree für MobX ist.

Zum Thema „opinionated“ gibt es aber im Kapitel „StyleGuide“ noch mehr.

TypeScript

Guter TypeScript-Support spielt im letzten Jahr für Redux allgemein eine deutlich höhere Rolle als bisher. Das mag auch daran liegen, dass Mark Erikson inzwischen voll in TypeScript eingestiegen ist. Seine Erfahrungen hat er in einem Blogartikel zusammengefasst.

Aber der Reihe nach:

Wie schon erwähnt, wurde Redux Toolkit schon recht bald in seiner Entwicklung nach TypeScript übersetzt. Einen Großteil der aktuellen Typendefinitionen hat übrigens der Autor dieser Zeilen verbrochen; ich bin seit Juli Contributer und seit kurz nach dem 1.0er-Release offiziell mit an Bord.

Aber das war noch nicht das Ende. Nach einer längeren Diskussion auf GitHub und einer überraschend eindeutigen Twitter-Umfrage fiel die Entscheidung, auch den Redux-Core, eine Bibliothek, die man eigentlich als „fertig“ bezeichnen konnte, nach TypeScript zu übersetzen. Die kommende Version 5.0 wird also in TypeScript geschrieben sein.

Darüber hinaus befindet sich die Dokumentation in einem großen Overhaul. Aktuell wurde sie für alle drei Bibliotheken um eine spezifische Seite zu TypeScript ergänzt:

Diese Dokumentation sollte für fast jeden TypeScript-Nutzer noch den einen oder anderen Aha-Effekt bereit halten. Insbesondere der neue ConnectedProps-Typ von React-Redux sollte Typdefinitionen für Klassenkomponenten mit connect deutlich angenehmer machen.

Styleguide

Als letzte große Neuerung gibt es jetzt einen offiziellen StyleGuide, der sich selbst als eine Sammlung von empfohlenen Patterns und Best Practices versteht und erfrischend „opinionated“ daher kommt. Und der hat es in sich, räumt er doch sogar mit vielen Empfehlungen auf, die sich zwar früher mal in den Docs wiedergefunden haben, aber aufgrund von Performanceoptimierungen oder jahrelanger Praxiserfahrung einfach nicht mehr zeitgemäß sind.

Die Lektüre lohnt sich!

Avatar von Lenz Weber

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Für das Handling unseres Newsletters nutzen wir den Dienst HubSpot. Mehr Informationen, insbesondere auch zu Deinem Widerrufsrecht, kannst Du jederzeit unserer Datenschutzerklärung entnehmen.