As an Angular developer, one of my biggest challenges was shifting my thought process from mutable-, to immutable state.
In an Angular service, you can simply assign a new value to a property, and like magic - the change detection would kick in and update any component using the property.
Switching over to React, suddenly immutable state is the way to go! Then, suddenly Redux - actions, reducers, middleware, dispatchers, and the list goes on.
πͺ Enter - Redux Toolkit
The first time I saw Redux toolkit, the very first thing that hit me, in Reducers:
...
reducers: {
increment: state => {
state.value += 1;
}
}
...
π€― What is this madness?!
Assignment operator in a Reducer? For a brief moment I thought I somehow ended up in the Vuex documentation, this is how you update state in mutations. But No, it was Redux Toolkit.
I followed the Redux Toolkit Quick Start tutorial and started creating some enhancers for middleware. It was fantastic! Suddenly I had a reason to enjoy using React and Redux.
π€ What is Redux Toolkit?
Take this excerpt from the official documentation:
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:
- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"
Once I read that introduction, I felt like they wrote this intro directly aimed at me π.
π Sidenote
Personally, I feel being a front-end developer can be a very fatiguing career. As soon as you're comfortable learning one tech stack/library/framework, the blog posts start popping up:
Have you tried "The Best Framework Ever, you should!" or "You don't know Server Side Rendering is better than what you're currently doing and you suck for not knowing it!". Okay, so maybe a little exaggerated.
The point was, that it's great to see the team coming up with a "standard" way of doing things.
Oh, and Why can we use the assignment operator?
Well, it turns out that Redux Toolkit, by default, includes a library called immer.
To quote the official documents again:
Redux Toolkit allows us to write "mutating" logic in reducers. It doesn't actually mutate the state because it uses the Immer library, which detects changes to a "draft state" and produces a brand new immutable state based off those changes.
A shout out to the dev(s) of Immer! I think it's a fantastic library.
π Conclusion
So there you have it! I think I might actually enjoy writing React code after learning some more of the fundamentals of Redux Toolkit. This is a great start for sure!
Have you ever tried Redux Toolkit? Perhaps you've gone down a similar path?
Edit: Typos
Latest comments (4)
Do you prefer to use NGRX + RTKQ or just using RTK?
What benefit does it have if we use them together?
Well, NgRx is for Angular and RTK is for React, so I wouldnβt be using it together. I still have to try RTKQ myself. Havenβt had a chance to experiment
So what about rxjs and asynchronos?
Great, glad to hear you're enjoying using RTK!
You might also want to check out our upcoming "RTK Query" data fetching capability, available now in the RTK 1.6 beta releases. In fact, NgRx maintainer Brandon Roberts just wrote a post about using RTK Query with NgRx.