React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Actions

React Flux: Stores

React Flux: Components/Views

React Flux: Project Organization

React Flux: Routing with react-router-component

React Flux: Remove Duplicate Code with Mixins

React Flux: Wrapping Up

React: Flux Architecture (ES5)

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found [here on Github](https://github.com/eggheadio/egghead-react-flux-example).

https://app.egghead.io/api/v1/lessons/react-react-flux-wrapping-up/subtitles

[00:00] Hey guys. In this video, we are going to complete our application using everything we learned in our previous videos to flesh out the rest of our app.

[00:09] We've got our header up and running. We need to get this cart summary guy working. We need to change the layout of our catalog page, and we need to get this catalog item widget up and running.

[00:20] Then, we'll create our catalog detail page, and our cart is pretty much good to go at this point. One thing I've added here, right in the assets directory, is this little product image placeholder. We will be able to use that as our product image.

[00:34] The first thing we're going to do is get our cart summary working. For that to work, we're going to need our app store and our store watch mix-in. We're going to create a function here called "CartTotals," and that's just going to return AppStore.GetCartTotals.

[00:49] Let's plug that into our mix-ins. Then, down here where we had this hard-coded, we'll now have this state quantity/this state total. Drop a little dollar sign right before that, save that guy and we should be able to test that out right away. We'll load up our application here, and as we add items to the car, we can see that our cart summary object is updating.

[01:34] While we're in here, let's go and create a continue shopping link right here in the app cart. For that, we're going to need our link component from react router component. Down here, while we're returning this table, we are going to wrap this guy in a div, just so that we can add our link component outside of the table.

[01:59] That'll be link, the href there would be our group directory, and our inner HTML would be continue shopping. Let's load our app again, add some items to the cart and we've got our continue shopping button there. Let's move to our catalog, and we are going to need to update the layout here.

[02:22] Looks like we've got four across, and we're going to use a little bootstrap to get that done. Jump over here to our catalog. Here, where we're building up our items, rather than outputting a table row, we are going to return our items rather than outputting a table row. We're going to return our catalog item component, passing it the individual item.

[02:40] We're going to close that, and here this is going to be a div with a class name of row. Then we're also going to need our store watch mix and so forth. We'll get that in there, and then we'll also get our catalog item component on the page. Here, we can drop initial state, get our mix-ins in place, passing it, get catalog.

[03:10] Let's now move on to our, "get catalog" item. Here, I'm going to actually paste in some code really quick, and we will walk through it.

[03:19] First, I'm creating this item style, giving each of our catalog items a border on the bottom and a padding on the bottom. We've got a div with a class name of CallSM3, that's going to give us our four across, then, we're passing in our item style and outputting the item title, our image, our summary.

[03:38] Here, I'll turn off word wrapping. We're outputting our cost and we've got a span with a text name of text/success. If the item is in our car, we are going to go ahead and output the quantity and the string in cart. After that, we've got a quick button group with a link, we are going to need our router link component.

[04:00] That's linking to the /item/itemID route that we set up earlier with an inner HTML of, "learn more." We're going to add to cart component. Up here, we are going to need our link component, as well as our add to cart component. Over on our add to cart, we're going to add a quick style so that it matches up with our other button. Button-default.

[04:31] Let's go ahead and try this guy out. Reload here in the browser. Cool, we've got our new layout, we can add an item to the car, we can see how many of that item are in the cart. We can jump to our cart, and get back to it. Now, we need to create our catalog detail page.

[04:51] That's actually going to be here in product, we're going to create a new component called AppCatalogDetail.js. This is actually going to end up using a lot of the same things that we were using in catalogs, I'm just going to copy these guys out of here and paste them in right there, and build up our catalog detail component.

[05:17] Catalog detail, which we'll and of exporting. This one is actually going to be a little bit tricky, because we need to create a function that's going to return a specific item. Let me go to create this docket catalog item, and what we're going to do is we are going to pass in our entire component to this method.

[05:41] We're going to have this item, we are going to take our AppStore.get catalog, and then for each of those, we're just going to cycle through and we are going to say, if Item.ID.2 string equals Component.Props.Item, then, this item equals item. After that, we'll just return this item for our initial state.

[06:28] Now, when we add in our mixin, calling our GetCatalog method, the problem we are going to run into is that we don't really have a way to add an extra argument to our StoreWatch mixin. What we're going to do is jump over here into our mixin, and then, we are going to add an argument into our callback of this.

[06:44] We're basically returning our entire component. Now that we have this component, we are going to jump over to our app, and rather than directing catalog detail to catalog item, we're going to direct it to product app catalog detail. Save that, we're going to jump back over to our product page.

[07:11] Here, we're not going to need catalog item, and add to cart is going to be like that. Here, in our render method, we can actually copy all of this out of the catalog item right there. We can use that to get started. Here, we're not going to worry about the size of the column. We make our title a little bigger.

[07:36] Instead of summary, we're going to do description. All of these items that say props are now going to be state. We're going to make our buttons a little bigger, and then, this link will actually be a link back to the home page. Our text there again will be continue shopping, and we will drop that after add to cart in this case.

[08:03] We're going to save that, and we were reload our home page. Make sure that's fresh. We have to learn more, and we are getting an error there. The link is not defined. Yep, we forgot to add that guy. Let's add it, try this guy one more time, reload and learn more.

[08:30] Cool. That's working, we can add the cart, we can continue shopping. Now, we are getting this message hear about a missing unique key prop. That's going to be in our catalog. Here, we're going to pass in a key of Item.ID. We will reload this one more time. Cool, we can add items here, we can jump over here and learn more about the item.

[08:55] We can add items there, we can jump to our cart, we can increase and decrease some of these, jump back. Jumping back over to our wire frame, it seems that we have satisfied all of the requirements for this wire frame. There you go, that is our full flux application.

React Flux: Wrapping Up

Share this video with your friends

Course

React: Flux Architecture (ES5)