Connecting Redux into React

[00:00:00]
>> All right, we're going to transition to binding this onto react. We're gonna work on one of the simpler examples, which is having a counter since our last incident. I put a string in there so you can change it to whatever you want the last coffee spill, the last outage, whatever makes you the happiest you can swap it into, if you want to play along.

[00:00:23]
There's two ways to do that. There is a sandbox here that you can use in your browser. There, if you go to the repositories using this course, you can grab incident counter as well. Both of those are available, whichever one makes you happier. I think the sandbox will work pretty great for those who'd be able to see the code and the counter at the same time.

[00:00:46]
I'm gonna do it in my editor so I can push up branches on the live coding, push up commits on the live coding branch as we go along so you can see different steps as things happen. So what we're gonna do now is we're going to apply some of the things that we have seen before.

[00:01:04]
Now, what are the things I'm not gonna do in this example is fuss around too much about folder structure. There are many different philosophies about how to structure your folder and in my experience, it really depends on the app like we have done different structures for different applications.

[00:01:21]
We can talk a little bit about that. We get around to questions and discuss some of the details, but for the point of like jumping around between files, I'm gonna keep everything flat. There are different philosophies around how to do this. And we'll play with some of those as we go on.

[00:01:34]
In the workshop, but the very simplest level will keep it super simple, which means we're gonna start out by putting our actions into just a file called actions. And it's useful to think about what this counter what are all the things that could happen and what is the state that we need.

[00:01:53]
We looked at this. Luckily, it's pretty straightforward at this point. The major piece of state is where we are in this counter. The things that can happen are incrementing, decrementing and resetting it eventually will add a few more features to it as well. The major things that we're gonna need to figure out is one, how to even tell react that are that Redux exists right?

[00:02:16]
And then two, how to then get it to receive that state. And three, how to get it to dispatch actions. Really, we can get that virtuous cycle going, we have effectively figured out how to bind to react to Redux and Redux to react and vice versa. So those are kinda the major things that we need to do.

[00:02:35]
We can kinda see what our actions are in this case, as well. And let's go ahead and we will implement them and so we're gonna start with that initial, Philosophy we talked about before of the kind of like all capital letter constants. We'll see later when we do Redux toolkit that we can have other ways to do it as well.

[00:02:53]
We'll start with the kind of the one that you will likely see the most common in the long legacy of Redux and React code bases. And then we'll kind of talk about some of the newer stuff that you might also see going forward. So we'll have the ability to increment, that seems good.

[00:03:13]
We'll have the ability to decrement. And then I could have reset, but I, unlike the rest of you all know the future of this application. So I'm gonna have an action called set, mostly because I want something that takes a payload and eventually we're gonna be able to not only set it to zero but set it to any arbitrary number as well.

[00:03:33]
You can kinda see that there's a set counter component that exists over here, that I'm just not mentioning right now. And then we'll create our action creators as well. So, export const increment, is really just gonna make an action of the type increment. You can take a wiled guess of what increment is going to do.

[00:04:08]
And then set is gonna be interesting one cuz set to kind of show you how this works. They'll take some would say amount value, let's go with value. To reset the value on the counter. So this will be the type set. And the payload will be the values.

[00:04:28]
This is a way to like format our objects. Again, you can see if there were many more things that we need to know, to make this happen, then we might have additional properties here as well. And the payload property is totally optional. It's just a convention that you will commonly see.

[00:04:42]
And with that, if your code base that you work in right now does something different, that's totally fine. Nobody's wrong. The only way, the only thing is important that you're consistent. Whatever you consistently use as a standard in your codebase is all that really matters. It doesn't necessarily matter what exactly that standard is.

[00:04:58]
Like there's a lot of flexibility because as we saw when we did our deep dive on Redux, It's all just JavaScript, right? There's nothing particularly special about it's just a pattern that we're using in our application. So our reducer, fairly straightforward as well. Like there was a reason why we were playing around with a counter example for a while there.

[00:05:18]
Our reducer is going to import those action types, so we will pull them in as we need them. I think the auto import and Visual Studio code will serve me here. So we'll say export the constant of initial state is going to be a, Count of zero and now, our reducer is gonna be pretty straightforward.

[00:05:46]
We'll just export const reducer and that will take the state that equals the initial state, and an action. I will remember to return the state now cuz we've already made that Booba wants to do. And now we've got the different cases and these are pretty straightforward to figure out what should happen.

[00:06:07]
If the action type is increment. Then we got to pull that in. Then we wanna take the count and State camp was 1. If we want a decrement pretty straightforward, you can imagine. Subtract 1, and then set is going to use that action payload. One of the things you might see in other code bases as you'll see a switch statement being used, where I'll switch between all the action with different cases.

[00:06:47]
The other thing you could do is you could have the action types in an object where the keys are the different types of actions that you respect and the value is the function that you wanna call with the state and the action. That's how Redux toolkit works. That also is super helpful for kind of very large reducers.

[00:07:04]
The fact of the matter is, it's all just JavaScript. So whichever one makes you happier is totally something that you can use. I like to use the conditionals over the switch statements because it's very easy to move them around and cut and paste them versus, okay, you have to have the brakes and the default and you can't just totally lift one piece of code and drop it into.

[00:07:24]
Another place in the application, so I like to use conditionals. But if you prefer switch statements, that is totally okay as well. And here are the count is just gonna be the action not payload. I'm just gonna make sure that it's a number As well. One of the things that is kind of a best practice is all of the peculiarities about what needs to happen to get your state in the right format should happen in the reducer.

[00:07:53]
Could you make sure that the input field was parsed into an integer in the action? Yeah, you could, but now when you need to change that code you'd have to run around to all of your different actions and go look for it. Versus if that logic happens in the reducers, you know that there's one common place.

[00:08:12]
I like to keep my actions to, one way thing about is just the facts. Right, which is just literally tell me what happened exactly as it happened. And I keep all of the, kind of, what that actually means to my application in the reducer, because that's effectively what I'm doing in the reducer.

[00:08:30]
Anyway, as I took the action in the state, I'm trying to figure out what that means. So, to be clear between the actions and the reducer, all we have to do is create a store. And then we have a full like working implementation of Redux that just doesn't know anything about react.

[00:08:47]
So we'll create the store and we will go ahead and we will put it into our react application. So we'll make one more file. We'll call store.js. And here we need the create store from Redux. And we also need our reducer. So we'll say our, Store equals, Create store.

[00:09:19]
Not that reduce. Cool reducer. Let's go ahead, and we'll just export this. So now we got a full working implementation of Redux, we just need to bind it to our react application. So here I have the initial setup of my react application here in index.js. And what we'll do in this case is we're gonna pull in this library called react Redux.

[00:09:52]
React Redux, has a very small API surface area as well. There's a few like advanced, like API's that we will the four major ones that we'll use are two hooks, one for getting state one for dispatching actions. Connect for wrapping components with the state and the dispatch and then a provider which answer other questions that we got earlier just basically hooks up Redux into your context API so your react application can access it from anywhere.

[00:10:23]
So what we'll do in this case is we will pull in this provider. And we'll pull in the store. And all we have to do is wrap the application in very, very similar to the context API, where the store equals the store that we made. I don't want that slasher.

[00:10:59]
And here we'll say provider. Now, our store is being passed and threaded through the entire component hierarchy of our react application and we are, they are now aware of each other.