Create Redux Store

[00:00:03]
>> Steve Kinney: We got a chance to just play around with Redux by itself. And Redux is again, separate from React. You can use it on the server, you can use it in any framework you want. It's just a convenient way to manage some form of state like in JavaScript agnostically, right?

[00:00:19]
But I think it's be more useful rather than kind of just looking at the methods to actually see it with a user interface. So [INAUDIBLE] I'm gonna basically take a very simple counter where we can see it in isolation. I'll have the ability to increment, you'll implement the ability to decrement.

[00:00:34]
We'll kinda see it there. And then we'll start building a little bit more complicated application once we've kind of just looked at some of the concepts in isolation. After we've coded a little bit, then I'll kind of explain the concepts a little bit more deeply. All right, so here we've got a very simple counter.

[00:00:52]
And this is, it doesn't do anything, it doesn't have any state. And we don't need it to have any state. We have two libraries that we're going to use. We're going to need to use Redux, right? And then there is a library, we saw it before, we have dispatch, we could say on component did mount, subscribe and set state in this component, so on and so forth.

[00:01:16]
We could theoretically just use Redux and React and wire it all up ourselves. But we could also just use the library, which is very conveniently called React-Redux. Again, it is not unlike some of those functions we saw earlier. It does what it says on the tin.
>> Steve Kinney: Import redux from Redux.

[00:01:44]
We'll probably actually pull off createStore, which is really the only one we need right now, in a second. And React-Redux actually only has two methods that it provides for the most part. Connect and Provider. Provider, if you've ever used like the Context API before, it's just basically a way to pass the kind of reference to the store that we're going to create to your React application.

[00:02:15]
React-Redux, cool. And here we'll just grab createStore for now.
>> Steve Kinney: All right. We're going to do this all in this file, right. One of the one of the criticisms of Redux is that there is a lot of boilerplate, right? And usually it involves like making many files. Now, in a decent sized application, like, that is smart, right.

[00:02:41]
For any of the complaints about there being too much boilerplate, to be honest, you are generally creating those files at the beginning of a project, and then you are living with that code base for the next several years, right? It's not too terrible, right. And once you kind of get into the flow, it's not too bad.

[00:02:58]
But for now, just to kind of see everything in one place, we're gonna do everything in this index.js. When we get to a more complicated application, we'll begin to pull everything out. All right, cool. So we've got the ability to create a store. We know that we need to have a reducer, but we also know that reducers are just kind of normal functions.

[00:03:15]
So I'll start with my reducer. And that's gonna take the state of the world and the action again.
>> Steve Kinney: We'll make like an initial state object up here so I don't have to put in the function. And we'll say like, count is 0, right? And so we'll make a reducer.

[00:03:45]
Default set initial state. All right, so now, things are going to happen in here. And no matter what, you wanna make sure you return some state if everything falls through, right? The reason we return state at the end is, as I mentioned earlier, every action will go through every reducer.

[00:04:04]
There's really only one reducer, but the combined reducers. So, if a given reducer does not care about an action, cool, just return that same piece of the tree that we had before. Like, totally fine, not every reducer's gonna care about every action. But we do need to make sure that as it flows through, that then we're then returning the same object out.

[00:04:25]
All right, neat. So there's two ways to do this. A lot of times you'll see switch statements, I don't like switch statements. That's just a personal preference. They're like harder for me to refactor. I don't know. So, what I'll do is usually just have a if the action type is increment.

[00:04:49]
>> Steve Kinney: Right, we will then return.
>> Steve Kinney: Plus one right? And this will work for us for now. We'll have to get a little bit more complicated with some of that stuff we saw at the beginning of this workshop, when we have multiple things going on. Because it's like, yeah, I'm like replacing the only object, the only property on this object.

[00:05:18]
When we get to the point where I'm trying to, I have a much more complicated tree, we're gonna have to spreading stuff and figuring out immutability. But let's kick that down the curve for a little bit and just kind of see this all together, right. So if the action is the type increment, then what we'll do is we'll return state.count + 1.

[00:05:39]
Another pattern that you'll see is this string is yet another opportunity for you to mistype something, right. If you all of a sudden, it's like increment, right, like it's basically, that conditional is never gonna get hit, your state is never going to change, you're not going to get an error.

[00:06:01]
And you're basically gonna have to go through the application looking for what happened, again, with a trail of console logs in your wake. So that's what you'll see is these getting pulled out into constants. Like I literally, as I was talking, left it misspelled. [LAUGH] I literally just committed the mistake that I was talking about.

[00:06:21]
So you'll see something along these lines. And then we'll use this constant without the quotes. And why this is nice is that, should you misspell it now, your code will blow up, right? It will not make it through CI, it will not go to production, right? Sometimes code blowing up is a good thing, right?

[00:06:41]
So cool. We've got our reducer here as well, we've got our constant. If we wanted to, we could also make an action creator here, right? So we could say const.
>> Steve Kinney: incrementValue.
>> Steve Kinney: We'll make an action of the type increment. That's really all we need, right? Before, we were actually passing a payload, this is a relatively simple version.

[00:07:13]
I just gotta be sure that I'm actually returning an object, cool. And now we can call this and we're gonna get our object created. Now, it could take arguments and add it to the payload. We'll see all of that in a little bit. But let's look at stuff in isolation first.

[00:07:28]
So we have the ability to create one of these actions. We have the ability to modify the state or return new state based on that action. We do need to go ahead and create a store, right. So we'll say const store is createStore and we hand it that reducer, right.

[00:07:47]
So now we've got, that is our Redux implementation, right? We could theoretically grab that store and we could go ahead and dispatch a bunch of increment value actions.w That is Redux, right? We'll get more nuanced and more complicated, but that is it.