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)

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.

https://app.egghead.io/api/v1/lessons/react-react-flux-overview-and-dispatchers/subtitles

[00:00] 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.

[00:15] 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.

[00:30] 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.

[00:43] 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.

[01:02] 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.

[01:16] 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.

[01:29] 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.

[01:40] 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.

[01:53] 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.

[02:10] 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.

[02:29] 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."

[02:57] 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.

[03:22] 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.

[03:38] 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.

[03:53] 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.

[04:15] Cool. We have our AppDispatcher. Now, we can move on to creating our actions.

React Flux: Overview and Dispatchers

Share this video with your friends

Course

React: Flux Architecture (ES5)