On this page
I hate Redux! There I said it. I know it is the “industry standard” and Redux itself isn’t actually that terrible, the issue is now cultural and the way most people use Redux makes me sick 🤮
In most cases adopting a React/Redux architecture is a naive and lazy architectural design decision. There are valid use cases for Redux but for the majority of web apps, there really is no need for Redux, at all.
Global State
This is a rant about Redux but more specifically it is a plea to stop making all application state global, which is exactly the behaviour Redux (perhaps inadvertently) encourages. As soon as you make app state global you’ve got some big architectural issues and a buggy, hard to test and maintain codebase. Good luck with that!
Architect options to avoid global Redux state
1. Use Remix
My new favourite framework. When you use Remix, you’ll likely find you don’t need a state management library at all 😃
2. Use Server State Libraries
If Remix isn’t an option and you need to make client-side API calls use a library like React Query or SWR that abstract away state management for server state. Congratulations you’ve just removed a huge chunk of state management code from your app.
3. Form State
Rather than using Redux global state to manage form state use a library such as React Hooks Form. Form state stays with the form.x
4. XState
If an application really does require state management, use an XState state machine and visualise your application logic.
5. Keep State in Components
Wherever possible, keep state where it is used, in the components. Use component composition and pass data as props.
Final Thoughts
- Yes I’m aware of Redux Toolkit which takes away many of the common Redux pain points
In the real world though it’s rarely the case. What you see is Redux used without thought for why and chucking everything in global state for no good reason.
The best state management code is none at all, give Remix a try!