React Flux: Remove Duplicate Code with Mixins
As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.
[00:00] Now that we've got our routes built up, we've actually exposed a couple of problems with our application. Here, I'm on the home page. I'm going to add a couple items to the cart. I'm going to jump to the cart. Everything is working fine.
[00:12] I'm going to jump back to home, and now when I try to add to cart, I'm getting this message down here, a warning about where we're setting our state. The same thing is going to occur as I come over here. The reason we're getting that message is because we never told our component, our cart component, what to do when it unmounts.
[00:30] We're going to go out and do that now. This will be component will unmount, and we're going to remove the change listener. Then it's got the exact same pattern as our previous method. Jump back to the home page here, make sure we've got it refreshed, add a few items to the cart, jump to the cart, move some things around.
[00:57] Jump back to our home page, and we're no longer getting that error message. We no longer have the memory leak that we had a moment ago.
[01:06] We've also exposed another pain, which is that all of this functionality, the get initial state, component will mount, unmount, and unchange is going to be required for a number of components, and we're going to have to repeat that.
[01:19] We've already done it for the cart. We're going to have to do it for the catalog detail page. We're going to have to do it for this catalog item component, and of course, we're going to have to do it for the cart summary. We'll end up repeating that for each and every one of these.
[01:32] To fix this, we're going to create a new directory in our JS directory called mixins. We're going to create a mixin to apply all of this functionality to any of the components that require it. We're going to call this storewatchmixin.js.
[01:49] Here, of course, we're going to require react, and we're going to require our app store. We're going to create our store watch mixin. It's going to be a function. It's going to take in a callback, and that callback is going to be the function that sets the initial state.
[02:09] We're going to jump over here to our cart. I'm just going to copy all of this out of here and drop it right here into our mixin, and here we're going to call our callback rather than the specific item. Then we're going to do that here as well.
[02:31] We'll go ahead and export that. I think this is looking good. Let's go ahead and try it out in our cart. We're going to go ahead and delete all this. We're going to grab our mixins. It's going to be store watch mixin, and into that we are going to pass our cart items method.
[02:51] Go ahead and add this to our component here, and we'll try this guy out in the browser. Just going to reload this, and we are in fact getting an error line five. This is probably just a typo. Ah, we should be returning this whole object.
[03:19] OK, let's go ahead and reload that in our browser. We'll do add to cart, add to cart, jump to our cart. Everything seems to be working just fine.