However, we often use EventEmitter as a basis for Stores and React for our Views. The docs also offer this important caveat:įlux is more of a pattern than a framework, and does not have any hard dependencies. Let’s look at what each of the main components are and how they connect: The important bit is that stuff flows from React -> Dispatcher -> Stores -> React. Here’s a handy diagram from the Flux docs showing what that flow looks like: An Overviewįlux’s slogan is “unidirectional data flow”. This Flux tutorial will demonstrats how the Flux pattern handles these problems with impressive ease and simplicity. Sending events from the UI to the Models, and then from one Model to another and then back again, makes it hard to keep track of who was changing who, in what order, and why. When I first began working on React-Backbone application code, the “complex event chains” that I had read about didn’t take long to rear their hydra-like heads. Unfortunately, leaning on Backbone alone to handle the entire application flow outside of React’s Views presents unfortunate complications.

Most examples of React outside of so far have have included mentions of Backbone being used in tandem. It’s a de facto standard library for structured front-end applications, and it’s been paired with React apps since the latter was introduced in 2013. Non-CoffeeScript developers should be able to follow along, and can treat the examples as pseudocode.) Introduction to Facebook’s Fluxīackbone is an excellent and well-vetted little library that includes Views, Models, Collections, and Routes. (Note: I use CoffeeScript in my examples for convenience and brevity.

Here, I’ll introduce basic Flux examples of control flow, discuss what’s missing for Stores, and how to use Backbone Models and Collections to fill the gap in a “Flux-compliant” way. The Flux pattern solves some major problems by embodying important principles of event control, which make React applications much easier to reason about, develop, and maintain. Flux is an “Application Architecture” (not a framework) built around one-way data flow using React Views, an Action Dispatcher, and Stores. It doesn’t have much to offer when it comes to managing data and state.įacebook, the makers of React, have offered some guidance there in the form of Flux.

React is only one part of a front-end application stack, however. Sometimes it seems like the best thing since sliced Python.

React app examples