Creating an Alternative Redux

[00:00:00]
>> We're gonna make a Todo app, but this app is Todon't, we're gonna have habits that we wanna stop. And if we run this, it's gonna open up a little web pack server and we have The Todo app template hurray. So if you look at the app, it's just the standard template for the Todo app that people share around for their frameworks.

[00:00:28]
And I didn't want people to have to know React coming into this, so if you look at this package here, we have our standard HTML package that's just loading the bundle in a style sheet, or HTML file. But then we also have this UI folder and this is the entire UI, it's just a couple of components, and I don't want you to have to worry about it.

[00:00:52]
So I just wanna call out a couple things so you don't have to look at this anymore. So we have our initial render app which takes an initial state and a dispatch function. So I'm able to kinda call out of this app and have it rerender. So when we go into the dispatch function, this gets called with an event, so this is not Redux, it's very Redux-like, that's gonna get called with an event and a payload, some data.

[00:01:23]
So we get create, destroy with an index and view okay, those are the only events we have, we've got a couple components in here, and should really be not important to the rest of the app here. But I just wanted to mention that this is here and you don't need to know React.

[00:01:45]
But we're gonna cover under app with state and dispatch. Okay, back to index, what we're gonna do here is much like we did earlier with modeling functions. We're gonna model this kind of reduction process, so if I start off the app, and I call some stuff, nothing is happening.

[00:02:11]
So let's go ahead and log when we get called here, we'll console.log the action and the payload. It's that time of day where I can't type, and I have to return some state here as, probably what is it? It's expecting to return so in fact, let me just call this state so it doesn't blow up after we do this thing.

[00:02:43]
So we have state and we're gonna return state okay, so when I actually do something here, it says the action is create and the payload is named sdf. All right, cool, we could do this, all day long, we get this action so let's build a little create action just to start.

[00:03:07]
Create and we're just gonna hard code create in here for the time being. So that would take the payload and the state, state in the payload and the payload being this name, so I guess this is the name of our habit, so let's just call this habit. All right, and what we're gonna do is object assign, we're gonna return new state with the habit, great we're gonna overwrite the previous habits with this one that we just gave it.

[00:03:46]
And so we call create with the payload and the state, you just return that. Cool, good times. Let's see what happens, one thing I should should mention is we have to render the app again, right here with the new state, okay? So why don't we make a little bit of an event loop just to start off?

[00:04:13]
Let's call this little event, it's called appLoop, take an initial state, and then we'll do this kind of thing, and we'll call this appLoop, right? So it just loops around and renders the new the new state calls our function starts again, and then we can get rid of this state variable and just call it an app loop, to kick it off.

[00:04:38]
Okay, are you with me? All right, let's run this and say, hi, hey, there it is cool now if I click it, it goes away that's fun. Because we don't have a create, so stop logging the event, here, if we log it again, log the action and payload.

[00:05:06]
We get is if I click the Delete we'll get a destroy with the index, if I click the actual title, I'll get a view with the index. And those are the only three events we're going to handle in this app right now. So, I guess I'll leave those in for a second, so I guess we had build another little router, so what we gonna do route on the action.

[00:05:32]
We'll just call that function the state payload, so get a little router again, const route router, route [LAUGH] route, router, route = {create, destroy, view}. Those were the three functions that we got or the three actions we got, we'll just stub them out so destroy takes an index.

[00:05:57]
And we'll just leave that alone for now let's just clear it out and the view, so this is not take in index this takes a payload with an index property, right? So I'll have to destructure to get at that index, it's not clear why that's working? Okay, and then we'll go ahead and view the thing and we just wanna set the current index to that index, cuz they're called index.

[00:06:34]
And we wanna set the page to show, I think it's called show we'll figure it out. Great, looks like we're done, [LAUGH] see what happens, A B, but we're only saving one at a time we're not actually appending anything. If I click it hey it says showing C, that's good, what if I do delete?

[00:06:58]
It clears it out, I guess, [LAUGH] so I think the first thing we have to do is actually append this thing.