At hashtagify.me we recently started experimenting with the React library, and, right from the start, I really liked what I saw.
After that, I also went to study the Flux architecture, and, honestly, I found the official overview and tutorials rather confusing.
I realized that the Todo List tutorial – the first one you’re supposed to learn from, as I dutifully did – illustrates an older version of Flux, and isn’t even up to date to the recent changes to the Todo List example code on github. I’m pretty sure the Facebook team will fix this soon, but for now this really doesn’t help.
Anyway, in the end, I understood that Flux is much simpler than many wordy explanations make it look. To spare my team my initial pains in getting it, I created a diagram – a visual cheatsheet – to better illustrate how it works, based on the latest code examples by Facebook. The team found it useful, so I decided to give back to the community and publish it here.
It’s meant to be a companion to the official docs and tutorials, not a complete explanation. But most of the core concepts are there. The code snippets are from the Chat example app.
EDIT: some people are having problems with the mural.ly link or want to download a simple image. This will be uglier when zoomed and without links, but here you go with a simple PNG export: Flux Architecture Visual Cheatsheet (png)
PS after understanding the core concepts of Flux, you might also want to find a library to make its implementation easier. We did, and decided to go with alt, because it looks like the most mature library that conforms to the Flux core concepts. But, if you’re more daring than us, you could consider studying the experimentation going on around immutables and cursors. I think something great will come out of there.