Advanced State Management in React (feat. Redux and MobX) Exercise: Implement Flux in Jetsetter

Transcript from the "Exercise: Implement Flux in Jetsetter" Lesson

[00:00:02]
>> Steve Kinney: All right, so what we're gonna do is we're going to try. We have some slides that have some hints in them. We're gonna see how far we can get implementing this in Jetsetter. We know that we're gonna have an item store. We know that it's gonna add items, remove items, update items.

[00:00:22] It's gonna do very similar things that right now happen to exist in the application component. And for those, we pass them from application to items, from items to item. It would be great if I could just, from an item, say like, update with a new value of it.

[00:00:42] From the new items component, if I don't have to tell the application that I wanna add a new item, I just want to tell the store which can exist to the side of the application, that a new item has been added. We wanna start to pull the state out of that state tree from before lunch when we had to do it by hand.

[00:00:58] We wanna now pull that out. And so this is still a very simple tree. It's only got three levels to it, but we'll just imagine that it's a much deeper tree. And so we can pull this out. We can have the store tell the items list, or we can have the individual item say, hey, I need to be updated.

[00:01:17] And it can tell the store directly without passing stuff back up. And we can pass the list back in. You might still wanna pass the entire item list into the application component and let it filter the two of them out. That makes sense. But it would be great to not have to pass those actions down two levels.

[00:01:31] It would be great not to have to start out with an action for creating a new component and application to pass it to new item. Like, we don’t want to have to do that. So do I expect you to get all the way there? No, what I expect you to do is try to get some muscle memory.

[00:01:46] Try this out. Start to implement it. See where the gaps start to lie, because this will be your first time implementing after listening to someone talk for 30 minutes straight. Is my plan that you will definitely remember every single part of that? No, but we have some slides with some hints.

[00:02:03] We have an example that I'm about to push up. I'd like you to like at least try to get some muscle memory, and then we'll do it together to reinforce that in about 25 minutes.
>> Speaker 2: Let's do 30.
>> Steve Kinney: 30, let's round up to 30, very cool. Okay, again, so I warned you, this time we're gonna do it.

[00:02:28] There is a flux-base branch, and that is kind of like the default setup. There's some files created for you there. So you can start on the flux-base branch rather than whatever live-coding falf-following along thing that you might have, cuz that may be hard. There is a nice place for you to start.

[00:02:45] Just check out flux-base, and that should be at least some of the accoutrements there for you.