reducer & createStore

[00:00:00]
>> Steve Kinney: So there's one of them. We've got 20% of Redux we understand already, killing it. Neat. So anyone wanna venture a wild guess at what createStore does?
>> Steve Kinney: It's one of those things with a correct answer, it's just using the words. It creates a store, great. And so, then what is a store?

[00:00:23]
A store is effectively our ability to manage the state of our application, right? It's the current state of the world and the ability to dispatch actions to change that state. Things will go poorly. You're like cool, I'm just gonna call create store, it's gonna go great, right? It will not, it will blow up.

[00:00:45]
And we'll talk about why in a second. Go ahead and run it, just to see the error, right? This is a helpful error. Expected the reducer to be a function, right? And so it takes one argument, which is a function. And that's that reducer function we saw on the diagram earlier, right?

[00:01:02]
And so if I just give it a function, it'll technically be happy with that.
>> Steve Kinney: I've got to clear that. Cool. It doesn't blow up anymore. So this is our reducer function. A reducer function is supposed to take two arguments. The current state of the world and the thing that happened.

[00:01:23]
And it should spit out a new state of the world. So let's go ahead and let's make a reducer. Let's get the first argument state and the second one, which is some action. All right, and then we'll start by just returning the state back out. So this point like any action that comes through, totally fine.

[00:01:46]
We'll just leave the state of the world unchanged, which is cool. And so here we'll say const store equals createStore.
>> Steve Kinney: And give it that reducer function. And now hopefully nothing blows up, sweet. Right so now we have a store, right?
>> Steve Kinney: Let's see what that's got on it.

[00:02:15]
That was bad.
>> Steve Kinney: Cool, so we'll say, what are the keys on this?
>> Steve Kinney: So this has got a few. It's got dispatch, subscribe, getState, and replaceReducer. All right, like, let's, replaceReducer, pretty straightforward. You give it a new function, it replaces the reducer. Super useful for code splitting, right?

[00:02:46]
You can basically, as a user navigates to a new part of the app, you can then load another, maybe reducer that has that extra piece to it and replace the one in there. But we'll keep that one separate. That one's pretty self-explanatory. There's dispatch. Remember, we said we dispatch actions to change the state.

[00:03:04]
That's gonna be really important. Get state, another one of those that basically does what it says on the tin. Right? It will get you the current state of the world. And then also this subscribe basically fires an event every time the state of the world changes, right? Why is this useful?

[00:03:27]
Imagine you're building a client side app in React, right. And you want to, every time the store changes, update the UI of your React application, right. Subscribe seems like a great way to do that. Now there's a library called React-Redux which basically handles all of this for you.

[00:03:45]
But to show you that none of this is like sorcery, right, it's all just basic, pure, regular old JavaScript. You could probably rewrite your own implementation of Redux in an afternoon. You shouldn't, because there is one, right, that has been battle tested and had bug fixes and edge cases, but you could.

[00:04:07]
All right, so let's go ahead and we'll give it kind of, we'll give it our initial state of the world, just like an empty object, right? And so we'll have that as a default property in there. And so what we'll go ahead and do is we'll actually make that store again.

[00:04:28]
>> Steve Kinney: Give us a little space here. createStore.
>> Steve Kinney: And we'll give it that reducer.
>> Steve Kinney: And we'll say.
>> Steve Kinney: Give it a default value of 1, right. And what happens if we do? We'll run this code, clear it out. And we'll say store.getState. You get an object with that value out, right, great.

[00:05:09]
This would theoretically be the props that we pass into all the components in a React application and React does its thing. There'll be no like setting state or anything like that. All of the state is held in Redux, pass it through.