DEV Community

Cover image for Angular Developer discovers Redux-Toolkit
Dewald Els
Dewald Els

Posted on

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;
    }
}
...
Enter fullscreen mode Exit fullscreen mode

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


πŸ€“ Thanks for reading πŸ™

Edit: Typos

Top comments (4)

Collapse
 
markerikson profile image
Mark Erikson

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.

Collapse
 
timsar2 profile image
timsar2

Do you prefer to use NGRX + RTKQ or just using RTK?
What benefit does it have if we use them together?

Collapse
 
dewaldels profile image
Dewald Els

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

Collapse
 
timsar2 profile image
timsar2 • Edited

So what about rxjs and asynchronos?