This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Flux Architecture: Application Dispatcher

1:55 React lesson by

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

Avatar
Stephen

Joe... When creating the facade for Flux’s Dispatcher, your parameter list for “dispatch” (actionType, action) does not match the Flux implementation (payload). This single “payload” parameter is an object which has an “actionType” property. In the next lesson you will correctly call the dispatch façade with a single argument of “{actionType, item}”.

Avatar
Joseph

Thanks for the feedback, Stephen. Good catch, I'll see about updating that description.

In reply to Stephen
Avatar
Pete

How does the Events dependency get added to react projects?

If i was building a node application and running with node index.js, I know it's apart of the node-core; however when we're building these react flux apps and extending the event emitter, I don't quite understand where that dependency comes from?

We aren't doing npm install events anywhere, it just seems to magically be there. Could you please shed some light on this?

Thank you!

Avatar
Martin

Node comes with a bunch of libraries, events being one of them. Since node is installed on your system and used by webpack when compiling your code it will be available and bundled in your app. You can do that with every package that comes with node.

In reply to Pete

In this lesson, we're going to create a dispatcher for our Flux application. Now, we previously installed Flux to get the open-source dispatcher code from Facebook, so we're going to look right here in the lib directory at the Dispatcher.js file.

For this application, all we're really concerned about -- and honestly, for most Flux applications -- is this method right here, "register," which just registers a callback in an object that the dispatcher's going to keep track off.

The next one we're concerned about is "dispatch." Without diving too much into the code here, all it's really doing is preventing raise conditions, making sure that each dispatcher or callback is executed in the order that it's received.

We could use the dispatcher directly, but what we're going to do is, create a new file called "AppDispatcher" right here in our dispatcher directory. We're just going to set up a facade around dispatcher. When you're creating your Flux application, it's important to have your distinct AppDispatcher separate from the Flux dispatcher, so that you can inject any logic you might need.

For the purposes of our application, we just need a very simple facade over dispatchers. So we're going to import dispatcher from Flux. We're going to instantiate that as Flux = new Dispatcher. We're going to export a function called "register." That'll take in our callback, and return flux.register(callback).

I'll export one more function called "dispatch," and that's going to take in an actionType. We'll talk more about that later. It's going to take in an action where it's going to call flux.dispatch(actionType, and action. That's all there is to it. We've created the dispatcher for our application.

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