This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "react-redux Exercise" Lesson
[00:00:03]
>> Steve Kinney: All right, so, it’s time to look at Jetsetter. And in the last exercise we started to wire things together and we know that the react base branch has the kind of end result there. So if you didn't get to get all the test passing, it's okay, I got you covered.
[00:00:22] We're gonna kinda go in and we'll be able to, we're just gonna kinda get one or two of these put together. The goal is not necessarily get the entire application done, cuz we'll be able to build on it from there. But we probably want to just get a feel.
[00:00:38] Again, we wanna get that muscle memory of writing a connect implementation. Not an implementation but using connect to make a container component. So you may not get it all done. I would suggest maybe starting with either like packed or unpacked list that we can show on the page and trying to get that in there.
[00:00:58] And so you don't have add yet so you might wanna go to the initial state file and just add some items by hand but try to get maybe one component done and we'll implement it together afterwards. So let's just show where you might wanna look in here to get you started on the right foot.
[00:01:15] So this is pizza calculator. And this is Jetsetter. Very cool, so I have all of my filters and reducers. If I go into the store, you can see that I've wired up everything I was talking about before. So that's all done for us right now. And what we're gonna want is these containers which are blank.
[00:01:35] So I would, for instance, pack maybe create the packed items container. Well, what is the packed items container need? Well, it's gonna need the map state to props and map dispatch to props. We can start even with just map state to props, cuz it's going to pluck the items off of the state tree and it's gonna filter through all of them looking for the packed items.
[00:01:55] Right, so that's like a great place to start. Dispatch will probably wants to grab the ability to toggle an item and remove an item so it can pass it down to all of its children. So we can kind of plot those two things off as dispatch. We can pull the one piece of state we need and filter it and we'll be able to create this present day of packed items container that we can go ahead into the application.
[00:02:19] And what we'll be able to do is take this packed items one and swap it out and we will have one that's connect to redux. So let's spend about 15 minutes trying that out and then we'll kind of look over a slightly completed example where we can see all of the moving pieces together, and look at it with the dev tools.