Flux Architecture: Routing with react-router 1.0

[00:00] we are going to look at adding React router to create some routing in our Flux application. Now if we look at the current state of our application, we've got all our architecture in place, and our state being managed, but we've just got this one view with our catalog component as well as our cart component in the same view.

[00:17] If we look at our completed application we need a stand-alone view for our catalog, we can add to our cart, we can jump to a route just for our cart, and we can also jump to a route just for an individual catalog item. Across all these we have this persistent header with our cart summary component. So what we're going to do is just split out the cart and catalog components into their own routes, we'll go ahead and build up this header, and we won't worry about the individual catalog item page for right now.

[00:48] So in our app.js we're going to remove these app actions we don't need, we're going to import a new component we'll be creating called template, and it will live right next to our app.js, we're also going to import router, route, and indexRoute from react-router. While we're in here we're going to go ahead and convert over to a stateless component where rather than returning regular JSX we're going to return some react-router components, so we're going to start with a router as our outermost component.

[01:22] Inside of that we are going to have a route component, and then inside of that we're going to have an indexRoute component as well as an additional route component. Now our outermost route is going to have a path of just a forward slash, and we can pass in which component we want to show at that route, that in our case that's going to be our template. Now these nested routes will appear inside of the template, we'll pass these in as props.children.

[01:51] So now our indexRoute is basically a default component to show when our path matches that of our parent route path. So we don't need another path here, but we do need to show a component, in our case that's going to be catalog. We can go and just self-close this guy, and finally in this nested route we're going to have a path of cart, and of course our component there would be cart.

[02:19] OK, so we can go ahead and strip this out and move on to creating that template component. It's going to live right here in our components directory, called app-template.js. Of course we're going to import react, we're also going to be importing a new component called header which we'll get from the header directory we created, and we'll call this guy app-header, and the export default stateless function takes in props, and returns some JSX.

[02:47] So this will be our container DIV coming back from bootstrap, and we're going to have our header component. Then finally we're going to have props.children, so when our template route is called, we'll take a look at that really quick, here's out template route. When that's called, one of these will be its children, either the catalog component or the cart component.

[03:16] So go out and set up this header component, app-header.js, of course we're going to import React and we're going import another component that we're going to be creating called cartSummary, that will live in the same directory, so we'll just call that app-cartsummary. Again, another stateless component.

[03:37] This one I'm just going to go ahead and paste in, we've got a very simple row with a little bit of styling, another column with our store heading, and another column aligned right with our cartSummary component, so we'll go ahead and create that now. App-cartSummary.js.

[03:52] Now this one we're going to be importing in react as well as our AppStore and our StoreWatchMixin, because if you remember this is the component on the top right that's also keeping track of the state of our application by presenting the number of items in our cart as well as the total cost of the items in our cart. We're also going to import link from react-router which simply allows us to create links to various routes in our application.

[04:22] We can create a const here for cartSummary, be a function takes in its props, and of course returns some JSX. So we're going to have a DIV here, we're going to give that a little bit of style, padding-top of 15 pixels, and inside of that we're going to have our link component which we're getting from react-router.

[04:42] It's going to have a to property which is simply the path that we want to go to, and I'm going to give this a quick bootstrap style of button, button-success, and then inside of that, we'd use some string templating from ES6, so it's going to be cartItems, and we'll interpolate our props.quantity so that's the number of items in our cart, drop a little forward slash there, a dollar sign before the next interpolated value which would be props.total, and of course we're going to get those props from our AppStore and we're going to wrap this whole thing in our StoreWatchMixin.

[05:23] So we're going to call StoreWatchMixin, pass in our cartSummary, and we're going to get that value, our initial props, from AppStore.getCartTotals. OK, let's take a look at our application. So everything seems to be running just fine, going to load this up. So we've got our cart, or I'm sorry, our catalog items, keeping track of everything up here we have our cartSummary component which seems to be working. We click on that guy and we're onto our cart, and everything seems to be functioning just fine.