So, there is a long-standing TypeScript & Redux pattern of creating a union RootAction type that contains all your application’s action types. Sometimes, you would also create a lot of reducer-specific sub-unions.
I think that this has always been a crutch - and given the options we have today, it’s most likely an antipattern.
So let’s look at why it was used, where it was used and what you can use instead.
This fall, I did two talks on the international JavaScript Conference in Munich. One talk was about avoiding global state in React applications (in German), the other talk was an introduction to TypeScript for React developers.
In vielen React-Applikationen hat sich der Trend etabliert, die Global-State-Managementlösung (meist Redux oder MobX) zu verwenden – als Allheilmittel für alles, was auch nur im entferntesten mit State zu tun hat. Aber während der Gedanke insbesondere angesichts unzähliger Tutorials naheliegt: irgendwie fühlt es sich meist unhandlich an. Außerdem arbeiten wir damit “an React vorbei” und machen oft genug React-interne Performanceoptimierungen kaputt.
Zum Glück gibt es für viele Anwendungsfälle inzwischen bessere Lösungen, mit denen wir den Herausforderungen einer modernen React-Applikation beikommen können – am Ende bleibt ein globaler State, den man auch guten Gewissens so nennen kann.
Der Talk stellt verschiedene Arten von State in einer modernen React-Applikation vor und analysiert, welche Spielweisen besser nicht in den globalen State gehören (natürlich auch: wohin denn dann?). Beispiele, wo der globaler State weiterhin eine wichtige Rolle spielt und wie wir ihn klüger nützen können, runden den Vortrag ab.
TypeScript adds static typing to JavaScript – and you can use it when developing applications with React. I will introduce you to the basic concepts of static typing and will show you how to use TypeScript with React. We are going to discuss not only the benefits but also the downsides of this approach. I will also show you how you can benefit from TypeScript when using state management libraries such as Redux.
Abstract by Hans-Christian Otto, who I filled in for with this talk.
I was over in London to talk about the state of React’s State handling ecosystem in 2019, comparing plain Context, Redux, MobX, MobX State Tree and local State with Apollo.
In the past few years, the approach to application state in React has been constantly shifting. Local component state has been complemented with global state management solutions like ‘react-redux’ or ‘mobx-react’. The introduction of GraphQL libraries like Apollo brought new approaches to API caching (at least for GraphQL). With the release of React 16.3, the reworked Context API has been finally declared stable, adding a viable option for small and simple global states.
As a part of the forthcoming React 16.7, hooks will allow for easier use of local state as well as context in function components. Existing libraries are already discussing new hook-compatible APIs that will change the way we are using them. Furthermore, the upcoming ‘suspense’ mechanism is bound to spawn the birth of at least a few new libraries with focus on “perceived local” data fetching and caching.
Unfortunately, there is no “one size fits all” solution when evaluating these approaches. This talk will highlight the different types of state occurring in modern React applications and give recommendations on how to approach them with the tools currently available, with an outlook on the near future.