The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or clickhereto continue anyway

Flux Architecture Visual Cheatsheet | A Techsolutionist's Blog

At hashtagify.mewe recently started experimenting with the React library, and, right from the start,Ireally liked what Isaw.

After that, I also went to study the Flux architecture, and, honestly, Ifound the official overview and tutorials ratherconfusing.

After studying those better, and after some more reading around, I think I understood where the confusion came from. Flux is itself – just likethe whole Javascript ecosystem – in a period of very intense flux, and the docs aren’t really keeping up with that.

I realized thattheTodo 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 explanationsmake 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, soI decided to give back to the community and publish ithere.

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 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)

UPDATE: after trying to use Flux with Facebook’s own Dispatch library, we decided to instead use Redux. You can read some background in my new post about Redux Async actions the easy way.

Continue reading on