Angular developer discovers Redux Toolkit

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 on 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?

🤓 Thanks for reading 🙏

Mostly JavaScript