Redux Toolkit & State Slices

[00:00:00]
>> So we've made a bunch of allusions to a tool called Redux Toolkit, which, again, sits on top of Redux. It's clearly not in every code bases predated and it all depends. If you're kind of walking along a very common path, it provides a whole bunch of useful abstractions.

[00:00:22]
If you've got a very large and complicated code base, it might not be the right fit. But I think there's two things. One, I think for a lot of especially newer applications, smaller applications, it's absolutely the right fit. And two, there are ideas that you can take from Redux Toolkit and begin to think about and apply in your code base even if Redux Toolkit is maybe not the best fit or it's just too hard to totally transition to.

[00:00:50]
I think there are ideas that you can borrow and inspiration you can learn for how you can create abstractions on top of Redux. So let's take a look. This is kinda shows you what it's trying to bring to the table, which is taking a lot of the boilerplate.

[00:01:04]
I think Erick asked me at one point, does this ever become second nature? And it does, but that feeling of one of the complaints on Redux all the time is there's a lot of boilerplate. And we were talking about this a little bit during the break, but it all kinda depends, right?

[00:01:18]
If this is a small app or something very kind of that's limited in scope, I don't even know if Redux is the right choice. But if you also think that, hey, this is gonna be a very large app we're gonna maintain over a really long period of time.

[00:01:32]
Then kind of spending a little bit of time configuring and setting up the foundation with Redux might make sense. It's always definitely like most things. It was like you should always use it all the time. It would have just been built-in, right? A lot of these become choices that we need to make, or this is also usually in case you're moving into a code base.

[00:01:52]
So what it seeks to do is kind of tie up our actions, our action creators, our reducers all into one kind of extraction called a slice. Even wires up the DevTools and Middleware just out of the box kinda gets all of that set up for us. So what we're gonna do is we're gonna just take a tour of the Create React App template.

[00:02:17]
You just see it at a high level, and then we'll actually implement it in an application as well that can now actually see all the moving pieces. So at first, what I kinda want you to do is just kind of take it all in and get the highlight.

[00:02:31]
You don't have to memorize everything as we go through it. We're just trying to get a lay of the land, and then we'll get a little bit more into it as time goes on. So if we look here, you can see that the demo app is, again, yeah, who doesn't love a good counter for demoing managing state?

[00:02:50]
So you can see we can increment it and decrement it. We can change the amount as well and add the amount in, very similar to what we all built as a team. Earlier, you can add only if odd, which because I'm adding 400 will always be the same, so on and so forth.

[00:03:08]
Cool, so let's actually just look at how this application is laid out to see what we can learn about Redux Toolkit. Redux Toolkit, like in the template, has this idea of a store.js, and then it's dividing stuff into folders called features. You think about before we had our items and our tip percentage before.

[00:03:31]
This is all you get to choose the folder structure. If you don't like this folder structure, you don't have to use it. I think it all depends, again, for simple applications, you might just have everything in very clean place like that. But you can see that there's even the counter component with the state.

[00:03:46]
In a large application, you can see how many different things might revive multiple pieces and it gets a little bit tricky. It really depends on the nature of what you're building. But the major thing for us to look at is this counter slice. You can think about a slice as just bundling a lot of the ceremony that we were doing around.

[00:04:07]
Okay, we're gonna make the action type constants. And we are gonna go ahead and we're going to create maybe action creators. And we're gonna make the reducers. And we're going to all these different pieces. So you can see here's basically what a slice looks like. You give it a name, in this case, it's the counter, right?

[00:04:27]
We might have had menu items, or counter, or whatever. The initial state, which is something we've seen before, in this case, it is value 0 and status equals idle. We'll talk a little about that in a second. And then the reducers, you can see that here we've got keys, which is increment, decrement, increment by amount, very similar to what we had before, and it's mutating the state.

[00:04:51]
All right, pop quiz, sports fans, what library is using just willy nilly modify the state without telling us?
>> Immer?
>> Immer, yeah, which it's abstracting that and hiding that. So if you started with Redux Toolkit and then had to jump into a code base that didn't have Redux Toolkit, you might be like, yeah, I can just mutate state.

[00:05:10]
I did that before, right? It's actually all of these methods are going through Immer under the hood, which allows us to kind of mutate the state as we need to and it's handling that for us. But again, abstraction is great until you don't really know what it's doing, and then it becomes a little bit tricky.

[00:05:28]
And what's interesting, we're not doing a lot of the pieces where we're matching action type equals a certain constant. Because what's happening is it's making action types based on the keys in the reducer that we can then use throughout the application. If we look at counter.js you can see that it's increment, decrement.

[00:05:49]
It's actually getting all of those from the counter slice itself. So it's making the actions on our behalf. It's storing the action types. It's kinda hiding most of the inner workings away from us, which is really great because it saves us from having to do all that tedium.

[00:06:03]
On the other hand, it is also hiding a lot of the inner workings away from us. So whether or not it's right for you is absolutely a trade-off. But everything is contained in these slices. It is trying to kinda wire up as much of it as possible. So we'll look at setting up a reducer, using the actions, and this extra reducer thing, we'll also take a look at as well.

[00:06:22]
And you can see this counterSlice.actions is where all the actions are stored from as well. You can see that it's using selectors. All the concepts that we've learned so far were leading up to this moment, where we could see it all kinda tied together.