Gentle Introduction to the React Flux Architecture

React is the "V" in your MVC, but with the Flux Application Architecture you can add the "M & C" to easily wire up components into a working application.

To get you started, we've published a series. We'll start with 5 (free) lessons as an introduction, and then move into building a real-world React Flux example application.

AngularJS tutorial about React Flux: Development Environment Setup

React Flux: Development Environment Setup

Our build process during this series will utilize both gulp and browserify. In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application. We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

Watch this lesson now

There are a multitude of GruntJS boilerplates I can fire up to kick off a new Angular project, but when working with the 'newfangled', I prefer to keep it all 'newfangled', so choosing GulpJS and Browserify as a build process makes perfect sense.

This is how we learn, dive in head first and figure out the quirks as we go. Turns out, though, that GulpJS and Browserify are more than capable counterparts to existing build processes... dare I say, even superior to them? With GulpJS we get clear JavaScript, rather than configuration, and with Browserify we get to tap into all those lovely npm modules we wish we had in the browser.

AngularJS tutorial about React Flux: Overview and Dispatchers

React Flux: Overview and Dispatchers

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.

Watch this lesson now

As an Angular developer I have run into the dilemma that is either 'service as state' or 'event driven madness' and while Flux appears to be as event driven as some of my nightmares, the idea of a Dispatcher is clean, clear, and even surfacing with many Angular devs I know in the form of an Event Bus.

The Flux Dispatcher, a.k.a. the Flux Traffic Cop, is a reasonable step towards solving the pains of event-driven design. To do something like this in Angular we'd really need a destination parameter as our actions are queued up to avoid a bunch of directives blindly bleating out actions into the $rootScope unaware of all the $watches about to be triggered, but thanks to the Virtual DOM this is less of a concern in React.

AngularJS tutorial about React Flux: Actions

React Flux: Actions

Actions contain no functionality, but rather describe an event in our application. In this lesson we will describe our Actions as they relate to our application. These Actions will then be available for triggering in our Views and for execution in our Store.

Watch this lesson now

In any reasonably sized application all devs eventually find a need to identify all of the events in the app. Flux very politely formalizes this process by having us take the time to not only identify the events as Actions, but also to organize them in a more meaningful manner than just a list of strings to broadcast.

AngularJS tutorial about React Flux: Stores

React Flux: Stores

Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views. In this lesson we will establish our first Store and register the Actions we wish to respond to.

Watch this lesson now

If Services were mandatory in Angular they'd be the Flux Store. Just like in Angular where we could place a lot of logic into a directive or controller we could do the same in a React Component, but having this very clear line of sight from Action to Dispatcher to Store to View makes doing so in Flux almost immediately recognizable as an anti-pattern.

AngularJS tutorial about React Flux: Components/Views

React Flux: Components/Views

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development. In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores. In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

Watch this lesson now

React Components are often compared to Angular Directives and I definitely see the similarity, but in my opinion React Components are what a good Directive should be. Dumb.

Joe is a father of five, lives in Chicago, works as a freelance web developer, shares coding tutorials on egghead.io, and codes for fun when not for work.

Go back to articles
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?