The simplest Flux implementation

Image from Facebook’s Flux website

There are a lot of flux libraries out there: Redux, Reflux, Flummox, Alt, Fluxible, and the list goes on and on.. However, if you’re using React and don’t want the overhead of an additional library, I have good news: you can get most of flux’s benefits with plain React.

All you need to do is make sure you have a top-level component that:

• Keeps the complete app state stored as its own Component.state (your flux store)
• Contains helper methods that modify the state, so you don’t need to call setState directly (your flux actions).
• Passes down an instance of itself to its children (the children act as flux views).

By default, React will re-render child components when a top component’s state changes, so you get the unidirectional data flow for free.

Here’s an example TodoMVC app implemented with this architecture:
https://github.com/alexishevia/blogExamples/tree/simple_flux

Note: Technically, you’ll still be missing a dispatcher to get a complete Flux implementation, but for a lot of projects this simplified architecture works great. YMMV.