Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

React Flux: Overview and Dispatchers

4:24 React lesson by

React is now at v0.14.x

This series shows an older version of React. There are some breaking changes. Be sure to check the provided code example for the latest versions.

Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact less like a typical MVC and more like an Event Bus. In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received. We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

Get the Code Now
click to level up

React is now at v0.14.x

This series shows an older version of React. There are some breaking changes. Be sure to check the provided code example for the latest versions.

egghead.io comment guidelines

Avatar
egghead.io

Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact less like a typical MVC and more like an Event Bus. In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received. We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

Avatar
hipertracker

require('react/lib/merge') does not work in React 0.12. It has been removed from the core, see:
https://github.com/facebook/react/blob/master/src/vendor_deprecated/core/merge.js

In reply to egghead.io
Avatar
Kristofer

I'm a noob on this stuff as well, but I just started going through the lessons and noticed this too. Given FB has open sourced their dispatcher (probably after this lesson was created), it seems like you can now eliminate the boilerplate dispatcher provided in the video and just use the one from the flux npm package.

Your app specific dispatcher just becomes like this then:

https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/dispatcher/AppDispatcher.js

Hope this helps.

Kris

In reply to hipertracker
Avatar
felix

Thanks a lot for this! Saved me a few minutes haha

In reply to Kristofer

Before we begin building our Flux application, I thought it would be a good idea to take a look at exactly how a Flux application works. We're going to start here, with the view. If you've worked with React in the past, this is going to be very familiar, because views are simply React components.

There is occasionally the notion of a controller view mentioned in regards to Flux application building. However, that's just referring to your root component that's usually passing all of its data and functionality down to children components.

Flux development actually eliminates the need to pass any functionality down to a child component, because all the functionality that exists in our application usually resides in the store. The store is where all the work is done.

What the store does is it registers with the dispatcher. It tells the dispatcher which actions or, more commonly, events it is listening for. When those events occur, the dispatcher sends a payload of that action out to any stores that are registered to listen for that action.

Then, the store responds accordingly and may or may not update our view. The view can trigger an action. It doesn't really know much about the action, other than we've made them available to the application by name, potentially, by type.

When the view triggers the action, it gets sent to the dispatcher. Dispatcher is queuing up all the actions that are occurring and executing them in the order that they arrive, in order to prevent race conditions.

It gets the action. It says, "Hey. Any store that's registered to listen for it, here you go." Store gets the action, and again, updates our view accordingly.

We're going to go ahead. We're going to start with this Dispatcher guy here. What I'm going to do is I'm going to npm install flux. This is going to give us the open source Dispatcher that's now available from Facebook.

Here in the Flux node module, I'm going to go ahead and open up the Dispatcher. We're really only concerned, at least in this series, about two different methods. The first one is register, which basically, just lets us register a callback. That's how restore registers with the Dispatcher.

It says, "When you get this particular action, here's the callback I would like you to execute," and so on. Then, the next one we're going to see is dispatch, right here, which, again, basically, just dispatches the callbacks that we've gotten, along with a payload that may or may not exist, out to our various stores.

We've got that guy in place. What we're going to do is, right here in our Dispatchers, we're going to create our application dispatcher. It's going to be app-dispatcher.js. To create our application dispatcher, we're going to need to bring in the Dispatcher from the Flux package, so ".Dispatcher."

Then, we're also going to bring in Object.assign, which is a utility in the React library. We're going to require react/lib/Object.assign. That's going to work a lot like an extend in Angular or Underscore or jQuery. You've got an extend that allows you to pass additional properties into an existing object. That's exactly what it's going to allow us to do.

I'm going to create our AppDispatcher here. What I'm going to do is I'm going to use the assign method to assign new properties to a new Dispatcher. That's going to be an Object that we'll pass in.

All we're going to do is we're going to create a handleViewAction method. It's going to be a function. It's going to take in our action. Then, we're going to say, "this.dispatch." That's the dispatch method on the Dispatcher that we looked at a moment ago.

We're going to pass in an object here. We're going to give our action a source. We're going to say that is a VIEW_ACTION. We're also going to pass the actual action. Go ahead and export this guy.

Cool. We have our AppDispatcher. Now, we can move on to creating our actions.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?