 Hey, how's it going? We're gonna start in just a couple seconds. I was just listening to a proverb. I found this sorry it's almost over. All right. Sorry, I was just getting set up. I listen, I do my best to listen to a proverb every day. I know not everyone is not a particularly religious group, but I do like proverbs because they really are just really good practical nuggets. If you know me, you know that I like practical nuggets. Anyway, really good stuff. But I found this playlist, so this is really cool. It's all of the proverbs. So if you are into that kind of thing, this is really nice. And I know that a lot of times I found one on, what's it called? I found it on SoundCloud, but they're so overproduced and weird. This one's just a dude talking, which is great. So it's nine o'clock. Welcome. Thank you for showing up. I appreciate it. Hey, how's it going, Thomas? Oh, I see you're sharing something with me. Oh, more English, updated English. So that's one thing I really like about the ESV is that it's kind of like an updated English version too, which is great. But yeah, I'll have to check that out. Is it like video and stuff? Or not video, red? That's something I'm loving right now is because I just, man, I like start to nod off when I read it. It's just a bad quality of mine. But yeah, I'm on a bad app. So today, let me pull this up. So let's go to reactjs.org hooks that'll redirect us to the introduction of hooks. So this week, I've just been exploring hooks. Thomas, kind of something interesting thing talking about like the different ways that people like to learn and kind of play versus consumption. And I am definitely the play type. I have to get my fingers on it, kind of bump around the edges before I understand it. So this is kind of a factor of that, which is fun. Now yesterday, I was the last of the basic hook types. So on Monday, we did use state. On Tuesday, we did use effect. On Wednesday, we did use context. And each of these kind of like landed themselves to each other. I love, I actually love the order that they put these in. Because use effect, like use a state, use a state, use state is really useful on its own. But then it also kind of gives value to the other ones as well. Which is, I like that they put them, they wrote them down in this order because you really need to know use state to be able to use effect well in the case of, you know, like watching a window or it's all those kind of things. But kind of keeping a reference to a subscription, whatever. So yeah, so let's kind of dive in. So that these additional hooks, and these are, so this is a, basically a kind of a slightly different use state. These are all for kind of like memoizing things. And these three are kind of special, or wait, no, these two are specializations of you use effect that opt into different scheduling, I think. And I don't even know what you use imperative method is, but I don't know, maybe we'll explore that next week. So today, we're going to talk about use reducer, just linked to use state conceptually, they're very similar. I was tempted, I was very tempted to kind of hide my ignorance and not and do a lot of research on reducers, particularly these like kind of state action reducers. However, I kind of, I decided maybe I wouldn't do that. And now we're here. I thought it'd be a little bit more fair if you were kind of in the same place as me where you don't actually use reducers day to day. Maybe you've heard of them, maybe years ago, you explored Redox and decided that it wasn't for you. And haven't really done this kind of state reducer in a while. If that's you, I wanted to meet you kind of like I wanted to be honest about where I'm at, and kind of meet you exactly in that same place. If you are familiar with reducers, you probably don't even need to watch this. Honestly, this is really just like what you've been using for a long time, except to use a slightly different syntax. It looks a lot like the use state version. Oh shoot, you know what? Again, I did that thing where I changed my system preferences. This is going to be really hard to read at 720p. So give me a second, I'm going to switch this up. Okay, I think that might have made things look funny on the stream. So I'm going to fix that now. Okay, everything should be bigger. Awesome. Yeah, thanks Thomas. I was making that same same revelation. Everything should be bigger and it should be taking up the whole viewport. If it is not, if you could let me know, Thomas, that'd be great. And we will, you know, deal with that, deal with that as needed. Okay, so we're on use reducer right now, right? And it looks a lot like if you tuned into use state or are familiar with use state, it has this array style destructuring where it's going to give you effectively like an array style tuple where you get the state in the first position. And the updater function in the case of use state in the second position. Now in the case of use reducer, it's very similar. You're going to have that array. First is the state and the second is a dispatch function. So instead of getting a function that allows you to mutate state directly, you can, you just have this one function that allows you to basically call, you call it with the details of the mutation that you want to make. And then it returns a new state. So let's see. So one thing that is different from use state is that with use state, we just pass in the state. And with use reducer, we need to pass in a reducer, we can define that in line, we can define it outside of that and pass it in by reference. But we'll kind of explore all those, all those boundaries. So I'm just going to read through this because I need to read through it to understand it. And yeah, we'll go through this together. As an alternative to use state, oh, sorry, use reducer, an alternative to use state, except a reducer of type state action, new state, and returns the current state paired with a dispatch method. If you're familiar with redux, you already know how this works. I haven't been familiar with redux in a very long time. So I need to read this. So here's the counter example from the used state section written to use a reducer. Okay, so we have so you have const initial state. And there's an estate object that we're holding to this reducer. So this is the so this is where we're defining that reducer, which takes state as an argument, and an action as an argument. We have a switch that switches on action type. So when we send this action in, it's going to be it looks like we're expecting it to be an object. And having a type property on that object that we'll be switching on. So we'll be calling this with objects. Let's verify that in the code. Okay, cool. So the on click is going to dispatch it's calling this dispatch function. Yeah, with an object, and the property, and then an action, like the action type. Okay, cool. That all makes sense. Okay, cool. So let's see, I'll finish reading this, then I kind of like attach it to like what I'm understanding from your state. So okay, so we have three cases, we have a reset case, which just returns the initial state. Okay, cool. And then I guess that this is I'm a little bit confused, but I'm assuming that use reducer kind of like retains it retains the current state, obviously, even though this reducer has no knowledge of the current state. I'm assuming that that is retained in use reducer in the same way that it is in new state. That would make sense. So we have a reset, which returns this initial state, no problems. We have an increment which takes the okay, it returns a new state object. Now this is so this is just kind of like returning an object with a similar thing. I think that we would probably if we had a more complex state, we would probably spread out the previous state, and then just that previous state and then change the key values that we're concerned with. At least that's I think what I've seen in the past. And then yeah, so then decrements just kind of the same, but with a with a minus. So we're pulling this state off the past end state. That you know, honestly, that seems that all seems pretty sensible. Um, lazy initialization, use reducer accepts an optional third argument. Okay, cool. So there's something in, let's see, where is this third space right here? So we have the first argument, which is to use reducer, which is the reducer defined here in this example, the initial state defined here in this example. And then what does it say a lazy, lazy initialization, which lives in this third part. So let's read about that for a second. Use reducer accepts an optional third argument, initial action. Oh, cool. If provided the initial action is applied during the initial render. This is useful for computing an initial state that includes values past via props. Gotcha. So we have a counter in this example, which takes an initial count. And we can use that to initialize our, our reducer with that, that, that initial count. Okay, cool. This example is a little bit more complicated. So I'm going to step through this as well. Let's see. So this one has a button. How do you set up a global state reducer? Ben's asking, set up a hook that has a use reducer. Good question. I'm not sure. But we can, we can play with that. Or if you want to tinker and you can post it in and we can look at it. I'm not sure yet. I'm very brand new to, to all of this, this reducer stuff. So let's see. So this is, this is the end of the dock on the use reducer. So I'll just kind of finish through this and then we'll kind of move on from there. So also, hey, Ben, how's it going? So we have, let's see. So we have, we're just spitting out the count. We have a button. This button does a reset. So it has that again, calls that reset action with a payload of initial count. Okay, so where does payload come in? Okay, gotcha. Okay. Okay, okay. So, okay. Sorry, how many times can I say okay in a row? Okay, so this part of it's the same as just that they add a reset button, which sends in an action and a type reset payload initial count. So then you can reset to the initial count. Now, I think what it's demonstrating here is a, like a certain level of parity between. So reset is just doing this same thing that you're doing to initialize your state. Oh, thanks, Ben. Cool. So that's that that seems pretty sensible so far, at least this simple example of it. So use reducer is usually preferable to use state when you have complex state logic that involves multiple sub values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks. Oh, interesting. So you basically just have one like bound function effectively. So that's, those are those are good things to know. So, cool. So Matt says that Tanner Linsley did a really cool stream showing how to make context factory with a global state and split reducers similar to how Redux does it. That's awesome. Matt, would you mind posting a link to that? I think that could be helpful to some people. And yeah, if you got it posted in there and I will, I think I have to approve links maybe, but I'll try to make sure that I see that and show it. Cool, cool. Now, they have some examples there. I did pull up the Redux docs, so I'm going to have to scroll through here a little bit. So if that makes you feel ill, just in case, because I don't really, again, have a lot of experience with reducers. So I wanted something to copy and paste. But it looks like we're going to have the have what we need to start at least with the the hooks API reference. I really love that they're doing such a good job with giving you some good starter examples. There aren't a lot of things that I feel like a beginner to react in. But reducers are definitely something that don't have a lot of experience with. So let's just copy and paste this. I ain't too proud to copy and paste. Clean this up. So I learned something while I'm kind of doing this work. I learned something. Usually I try to do these in full screen mode so we don't see this like this header. But in Chrome in full screen mode, bizarrely enough, if I open up like a new tab, I can't like I can type in here and hit enter all day long. It won't visit URLs. It's the weirdest, weirdest thing. As soon as I take it out of full screen mode, totally works. No problem. I don't know. Cool. Matt posted that in. I will show that. Awesome. Yeah, so go check that out. If you kind of have more like advanced needs, I am again, this is this is like the beginner version of action reducer stream. So if you have more, that's going to be a good place for you to go. Let's see. Okay, so I just pasted it in wholesale. Let's kind of reacquaint ourselves with the new structure that we have. So we have, again, just these examples, we have the use reducer. So I have the initial state. This is the simpler one. So we have a reset. Apparently there was a reset before and I just overlooked it. But we have a counter. Wait, did I? I didn't do the simpler one. I did. So sorry. I'm so sorry. Also, all my teammates have been making fun of me for all my teammates have been making fun of me because I have like, I have this like light on me and this microphone now. And I just keep it all set up because I've been doing me so regularly and so they're like, like it's like radio hour with Chan every time we do stand up. Okay, so let's see what do we have going on here? Okay, so this is our counter. We need to update our app to run our counter and we'll fulfill that interface of initial count with we'll set it to zero. Use reducer is not defined. Okay, cool. We need to pull that out. We can delete fragment because we're not using it anymore. I don't think use reducer. Cool, everything. I man, that's one of my favorite things about prettier is that everything just kind of like pink pops into place like so you know that your code is at least at least parsable. Okay, cool. So now we've we've just copy and pasted the example that we got from the docs in here. So now we're going to kind of poke at it and see what happens. So reset it's already at zero. Presumably if I put a 10 in here, that should work. Oh, wait. Oh, I didn't spell it right. Initial count. Okay, if I set that to 10, should work. Okay, so obviously there's some failure in my understanding here. So only on reset, but even even in that case, state that count initial state, when you put like a default here, let's see, where is the initial state? Oh gosh, the initial states up there. Okay, cool. I see, I see. Okay, cool. So this has all right, all right. All right, I'm starting I'm starting to track now. So this one, so I don't need to pass that in. Because yeah, weird. Okay. Because it's setting initial state from so that's really fascinating. This example is kind of confusing me a little bit because it's getting initial state from here. Why are we passing in? So we're passing in the reducer. And the second argument is what initial state? Oh, gotcha. Okay, so we're passing we're passing in the initial state here, but it's actually I'm so confused. Okay, so it's getting it's using this as initial state. So I don't understand what the purpose of passing in initial state in this way is. If you know, let me know, because use reducer initial state. Yeah, see, this is this is really weird to me. So can I pass it without an initial state? No. So count equals 10. Okay, cool. So count equals initial count. So that's undefined. We can set it. We can use like a default value, which would be zero. Okay, cool. That should still work. Reference initial state not found. Okay, so how do I get that that as an argument? Is that like a third argument here? State count is not defined. Okay, so obviously not. I need the initial state because the reset action doesn't actually fire by default. Ah, gotcha. Okay, so, so, so my question right now is they had initial state here in the use reducer. But I think that that's actually, I don't think that's right. It seems or doesn't feel right. So no, that's right. So how do I get access to the initial state in my, like, how does that work? You do not need to do it the way the docs did, but you will need, so Matt says, you don't need to do it the way the docs did, but you would need to share the initial state with both reducer and the use reducer. This is just an issue with flux architecture, not the specific implementation. Okay, I see. Um, okay, I think, I think I might get it. Okay, so I think, but then how, so the question is how would I have this and maybe this gets to Ben's question about globals is that it seems like in this case, I would always, even though I'm taking a prop with like the default or like the initial state, state is 10. Wait, sorry, initial count. Okay, so, so I can take this as a prop and so maybe that's the lazy thing. I guess maybe I'm getting ahead of myself. Because if I hit reset, that's going to go back to zero because it's getting this state from this kind of like shared initial state. And so I guess it is possible I'm just getting ahead of myself and I need to look into that lazy thing. Pass it with the reset. Okay, cool. So, all right, so it seems like we are, it seems like immediately what I was reaching for is lazy initialization. So I'm going to try and back up a little bit and just go with this example, which it seems does need to have this kind of shared default, in which case it seems confusing to have initial state as an argument. So I think I'm going to try and do that without the initial state or initial count argument, just for my brain to see kind of the minimum viable product here. So we're going to go back to initial state. Okay, cool. Okay, so we're adding, we're subtracting, we can go back through zero, and then we'll reset. Okay, cool. Perfect. So I was getting, I was getting a little confused here by taking that initial count prop. I was expecting it to behave a little bit differently, but obviously that is where lazy initialization will come into play. So, cool. Let's, let's kind of add some things. Whoops. Go to 10 count. So in this case, I could just make this a static 10. Okay, so I'll add a button. Actually, let's, let's define this all the way through. I'm going to get my fingers on it on click. We're going to give it an action, which is a function where we call dispatch type, go to 10. So we need there. The button text will be go to 10. Okay, so plus, minus, minus, reset, go to 10. Okay, cool. Perfect. Awesome. Awesome. All right. Okay, cool. I like this. This is fancy. I might actually have to introduce some, some reducers into my workflow now. This is awesome. Okay, cool, cool. Let's, let's do another one just for kicks. Let's see, what do we, so what's another like simple thing that we could do reset is already done. Okay, cool. So now that we got that, so what my, my takeaway from this is that kind of as, as, as y'all were discussing, is that we, in this case, this is not customizable in the way that I expected it to be by taking that initial, initial count prop. Because I expected to be able to that it would be initialized. But it can't be because it's kind of initializing with this global state. So and we're even using the global state here to initialize it. So this, this is all great. I am very interested now in trying to go into this elite, lazy initialization thing, because I think, I don't know, maybe that is what I expected it to be before. So let's do that. I'm going to instead of copy and pasting this example, I'm going to try to migrate to this example using using the code. So I'm going to pull this out. And might be a little cramped here for a second. Okay, so let's, let's just look at the number of things that need to change. So what changes in our reducer action type, reset. So this changes right here. So instead of referring to this initial state directly, we're going to get the payload, we're going to get the thing that we want to insert into state in the reducer. So let's say, so this is going to be count, oh, sorry. Yeah, count. So this is going to look like all the other ones, we're going to say action dot payload. And this particular verbiage is not important, but I think it is kind of, you know, standard. Okay, more coffee, cheers. By the way, I got this little 10 ounce hydro flask, and it's my favorite thing on the planet. It's my one cup that I use. So water, whiskey, coffee, whatever I'm drinking, I'm drinking out of this thing. This would be an amazing ad spot. I wish hydro flask was paying me to say how much I love their products. But this thing is amazing. I love it. It's been my only cup for several months now. And it's stellar. Let's see. Okay, so we changed that. Now, we're not actually using this. So that's a little bit backwards from the way that I usually actually, I'm going to do that. Sorry. Hydro flask got me thinking straight. Okay, so let's look at the implementation side. Yeah, brought to you by hydro flask. No, not brought to you by hydro flask. So the implementation side looks, looks like this. So the big difference is that this reset button is going to change because we're going to set it off of the initial count that we get here. So that's, that's this is the example that I was kind of expecting to land on. So, so, so from the very outside most point, it's going to look like this. The initial count is going to be we haven't used nine yet. So I'm going to say nine. Okay, and then as soon as this all represents that, that means we got our we did our work. So first things first, we need to change our counter to take an initial count, initial count. Let's see. So and then we need to set up our reducer, adding that third lazy argument, lazy initialization argument. So okay, so it looks like we still need to give it an initial state. That's fine. In this case, I'm not, I don't necessarily care that it's like globally available. So I might just define it in line. Sorry, this, this all just helps me understand how things work. I'm sure that there's a reason that they did it that way. Let's see. So count is going to be zero. Okay, cool. So that works again. Let me break this up a little bit. So we can see the arguments on each line. Now, the last one is that lazy initialization object. So here we're going to this is an action, we're passing in the first action. So whereas this is this is just a state object, we're actually passing in the like an action type that we want to be fulfilled when this when this initializes. So this is going to be different. We have to pass in a type. And I'm not speaking, I'm speaking to myself here. I'm trying to like process this out because I am sure that many of you already know how this works, but just processing out loud. So this action type is going to be reset. And we're going to reset it with the payload again, this doesn't, I think this is just kind of like standard verbiage. It doesn't have to be payload. That's a weird term for you. And we're going to use our initial count that we get from props that we're just structuring from props. Okay, so we're getting an error. Initial state is not defined. Perfect. That's great. So that and that's because we deleted it from this from from this module. So now we need to handle reset by taking the let's see. So we have, let's go back over here to our reference here. So reset. So we're getting the action type reset. We pass passing our first action on initialization. We're going to say we're going to return a new object with count and action action dot payload. Oh, man, that's amazing. Killer. Okay, resets busted though. So what do we do here? Oh, all right, all right. So that's the reason that we have to have this initial count. So it's really interesting that you have to have that live outside. So I guess this is where I mean, this sounds like this is the type of stuff that gets covered in that that other stream that that was linked. I think Matt linked it. Where is it? Yeah, so hopefully that's kind of what gets covered there. So yeah, so okay, sorry, I'm just catching up on on chat. Ben's on the hydro flask train too. Okay, gotcha. So reset goes to nothing. Let's refresh this and see where we're at. Interesting. So reset. Oh, weird. So this gets set to nothing. So when I hit reset now, it goes to nothing. And I'm assuming because I'm not sending in the payload here. Okay, I'm going to try something. So payload. Wild. Okay, that seems fine. So reset. We would always have to give it a value, which is fine. Okay, cool, cool. I think I'm tracking with this. I think I'm tracking with this now. Okay, so I had to change this a little bit so that in order to make this completely dynamic, I had to basically take this initial count I needed to append my dispatch recall to send in payload of initial count, because it's always being expected here. I guess we could. This might be non reducery, but I'm really curious. So instead of in the worst case, instead of getting nothing, we could have like a default value there of zero. Again, I don't know if that is like kind of counter the way that these are supposed to be authored, but again, playing finding the boundaries. That's an excellent question, Andrew. I don't know who's not on the hydroflask train. I mean, this thing, this is the only one I could find that was like the perfect 10 ounce size for me. So I don't, I don't know. What are the other double wall stainless steel cup companies doing that they don't have a 10 ounce cup? Hmm. Still warm. Yeah. Okay, cool. So I think that, I think that we're, I think we're in good shape. I kind of understand what's going on now. So, or a little bit more than I did before, which was none at all. So, okay. So in any example before, we needed to have when we weren't using lazy initialization, we needed to have some type of initial state that sat outside of all of this. Lazy initialization allows us to call like, pass in an action right away. So it'll like initialize things with the initial count. No, I guess this isn't. Sorry. Now I'm now I'm really kind of like just kind of moving around. So if I, if I took this out, what would that look like? Would I still get nine? I would still get nine. Okay. Interesting. Okay. So I can keep this dynamic without using the lazy initialization. I pass in my initial count when initializing it. But then when I reset, okay. So that's the trick is so now, now I have a reset that expects a payload. So now I can just do reset. What does it payload equals nine or initial count? Oops, I did that wrong. Pallowed. Okay, cool. Let's see. Okay. So we got another, hold on. Let me show that there, Matt. Cool. Matt has a code sandbox. Let me open that up real quick. Cool. And what are you, what are you showing us here, Matt? I should have checked that out first. That could be dangerous. Okay. So reset plus one minus one reset. Okay. So you are, let's look at this. Okay. So initial count. Okay. Cool. So you're, okay. Yeah, that's a way. Yes. This is a way better place to do that. So having the initial count be set on the component as opposed to in the reducer. I absolutely agree that that is a better place to do it. Yeah. So the rest of this is the same. Yeah. So it's doing that initial action. Okay. Cool. Yep. Totally agree. Okay. So let's, let's, let's make that change because I think that that is a vast improvement over this or zero. Thank you for that. Okay, cool. So now it's always going to be initialized with at least a zero. So let's see, initial count. So if I take this out here, we still get zero, but we didn't have to kind of hard code that into our reducer, which is very nice. Thank you, Matt. Very good. So, yeah. So all this stuff, all this stuff works. I, let's see. So it's 940. Man, it's water. Okay. So it's 943. I want to do one more thing. It might take a little bit longer than the time we have, but one thing that I kind of explored with, I think I showed you like use list is that you could basically abstract away some of the kind of complications with kind of inserting things into a list. Now that handles kind of state, it uses use state. So it's not using these kind of immutable ways of kind of creating new states. So I was kind of curious about how I could basically append to a list using a reducer. So if, if you want to hang out with me, I'm going to just kind of make that change right now to this app. So yeah, feel free to sound off. There's a little bit of a delay. So if I don't see what you're saying right away in chat, I probably will catch it momentarily. So let's see. So let's do like a to do thing. We're going to start totally from scratch here. So function to do it's called a list. On our list, we'll map over an initial list. Yeah, let's just do that for now. So we'll map over the initial list and take each item and do a list item with the item and there to avoid that warning, we'll put a key and we'll assume that all of these items are have a different name. So we'll just use the item like that initial list is going to be an array of by, oops, load site stream, ignorance. And sorry, just cracking myself up here. Don't worry about it. And taking out. So I saved all of those. Okay, cool. So this is, okay, so we got our to do list, it's mapping over the initial list. So how would we then use reducer in this case? I'm going to kind of look at that. I'm actually going to comment this out. So it's less visually distracting. Okay, so we're already pulling use reducer in. So we're going to say, let list and dispatch. Yeah, I wonder if we had multiple reducers if we would do it like this. Just a question. Let's dispatch use reducer. And we're going to pass it in a reducer. I'm actually just going to define this online. Now that seems messy. And the initial state, which will be list, initial list. Right. Seems consistent with what we've had up at this point. That's spelled incorrectly. And this is yet to be defined. So let's define our reducer. So we start with state action. And a switch. I have a terrible memory. So I might have to scroll up there a bunch of times. So we take the state, we take the action, we do a switch, which I can literally never remember the syntax for. I think it looks like this. So we're going to switch on action type. And then we're going to have a case. Nope, forgot again, case, um, reset, colon. And then we're going to return. Let's see, we would need to let's just turn that return the state that we already have. So whatever it is, whatever we have, we're just going to return that. I didn't return. And then how does that work? Do we need to like return a new object? I'm not totally sure with what the like kind of desired like effect of this is. I'm going to move this up this driving me crazy that every time I say if I go to the top, there we go, that's better. Um, let's see case return. Okay, cool. So let's add a reset button here. So let's take fragments, add a button type button. And that's going to be reset on click dispatch list dispatch is what I called it list dispatch action reset. And that's going to reset with the state. So hopefully that should do that should do nothing. Okay, cool. It does nothing, but it doesn't break. Perfect. Okay. So let's add another button. For add. Let's see, what else do I need to do today? A little bit of work. I'm going to do a little bit of work today. Okay, so that action is going to look like this. So we don't have anything yet. So we're going to add an item for it, which will be add or let's call it append and the payload. Actually, I'm going to not use that verbiage. I think it's probably best, but just to prove to myself in my head that I don't have to. I'm going to call it stuff. Let's see. So the stuff that I want to send along with that action is a little bit of work. Okay, so now we need to implement that action case append return. Okay, so how does this work? So all right, so I'm mapping over this initial state, not my list. So that last thing that I did wasn't going to change anything anyway. Good to know. Okay, cool. So we have some things that we need to fix. Now that the app is actually doing anything at all. Let's see. So now that we're getting list back, we need to give it an initial list. Okay, okay. Let's see what this list looks like. Just bump it into the walls here. Okay, cool. So I just need to pull it off of this. Okay, cool. So I'm calling. So let's call this list. I'm going to do this. I'm just going to destructure that out. Perfect. So I'm getting an object back. And yeah, that's right. Obviously, because we're passing an initial state object in, and then there's a key on there called list. So I'm getting that object back. And so I need to destruct your list off of that. Now I'm getting the right list. So I can change my code here from initial list to list. Great reset cannot read property list of undefined. Okay, cool. So in the reset case, we need to pass in the list. So that did break, but I just missed it because I didn't have the right code. So again, so stuff, which is our payload in the more world of in the world of propriety, stuff is going to be list of initial list, read undefined of list. Oh, wait, not read undefined. Interesting. Okay, so let me see what's here. So it's getting passed in the previous case. Or the the current state, right? So wait, hold on, I'm going to return an empty object. And I'm going to log state from both of these cannot read property list of okay list of undefined. Okay, so it's getting pissed at this again. So I'm going to change this back. Oh my gosh. Oh, right. Okay, okay. All right, all right, I get it. Oh, now I don't have dispatch. Oh my gosh, y'all are really seeing me struggle today getting your money's worth. Let's see. Okay, so we're really, really closing in on that time. So that destructuring, let's see, the state, let's do that. And if we don't use it, that won't be a problem. Hmm. Okay, so we're dispatching. So reset is going to dispatch this action reset. And it's going to send a stuff payload. You see where I'm going wrong, let me know, because I'd really, you know, we even getting in here. Okay, so that's called. So I think oh, so that I said action there. That's where I'm running into problems. So I just got to notice that my stream, they were receiving no data. So hopefully that is not the case anymore. It looks like I'm still sending data at a pretty good clip. So who knows, carry on. If you're still in chat, if you could just, if you just let me know that you're there, just that I know that we're even still live, just put like a wave or high five or something in there. Otherwise, I'm going to assume that this thing just died. And that's probably better because this is this is shameful programming right now. Okay. Okay, cool. So we're getting that list. So I'm not sure why this wasn't working. Okay, cool. Great. So in both of these cases now, we have that previous state, and we're just spreading it over a new object. I'm assuming that this this stream died because either that or we've we've kind of passed past interest at this point. Anyway, I'm going to finish up just just because I'm so we have a list. And we're kind of returning that. So what I want to do is take the previous state. So in this append version, no, I take the previous state. And then I'm going to update the list. I'm going to take state dot list and spread that out. And then I'm going to add or append action stuff, which is where the new item lives. Oh my goodness. Okay, reset didn't work. I think because we're just spreading out the state. So if I wanted to make reset work, I'd have to know I am doing that stuff. Oh, but I'm not using it. So list is going to be stuff that initial list. Nope, action console log driven development reset. Oh, it's an object. No, that's right. Object dot stuff that list. Oh, wow. Okay, cool. We got it working. That's not ideal. You can kind of continue to tinker with it. I think that the stream died unfortunately. So you're probably not even hearing me. I'm talking to no one. Anyway, thanks for watching. This was extremely informative for me. I hope that it was helpful for you as well. And not things that you already knew. I learned a lot. Just namely kind of like bumping around the edges here and kind of figuring out how to kind of keep that dynamic state without having to keep it outside. Yeah, so anyway, if you want to learn more, I think that these, the documentation is really good for hooks. It was a little bit weird. So I might kind of open up an issue and let's see where is that GitHub. I think this is for React, though, and not the docs. I think there's a docs site. Let's see. Yeah. Anyway, I'll find that I'll open up an issue to see kind of like what it is that the ideal or like what's trying to be demonstrated and kind of communicate my experience playing with this. Anyway, thanks for tuning in. Again, if you want to be notified of more videos like this, just subscribe. And I guess there's some like type of notification dance that you do. If you subscribe to a lot of stuff, you probably know how to do it. If you want to, I ain't trying to tell you what to do. I'll be doing another video tomorrow. I'm not quite sure what on probably maybe use callback and use memo. We'll see. I'm not entirely sure what I'll do tomorrow, but it will be hooks focused. So, you know, one of these, one of these three. So anyway, thanks for tuning in. I really appreciate the help that you gave me and you're spending your morning with me. So y'all are awesome. Thank you. See you tomorrow.