Flux in 30 lines of code
You’re busy, so I’ll keep this quick
The best way to learn something new is to create this on your own.
Follow the main idea
There’re lots of different Flux implementations we’ve got so far. Some of them are more popular than others. That’s true. There’re lots of articles about how things works and they’re amazing as well. So why have I created one more Flux implementation. Was I supposed to beat the current monsters of Flux architectures? Not really. I was intended to teach more people in less time.
Imagine you are about to start a brand new product with technology stack you’ve never used before. And there’re 20 more driven by technology people with passion and no proper experience. At all. Well, they know JavaScript and some of them even had an experience with creating Angular applications. But what about React based apps? Does Flux say something to them? Nope.
Remove the complexity
Dan Abramov did a brilliant job inventing better Flux by not doing Flux at all. Redux is a predictable state container for JavaScript apps. I decided to create the easiest Flux implementation I can. The only thing you need is to subscribe and unsubscribe from the store changes, send commands to inform store that something happened and get an ability to retrieve a current state of your app.
That’s why the one and only function you need is to create the store with provided API for your needs. It’s easy to read, easy to understand what’s going on even with beginner knowledge of JavaScript. If you’re intended to make a change in your app, just send a command to the store and provide a handler function for updating the state tree in the way you want. That’s it.
Provide the examples
Every time you learn something new you need the proper docs and examples of usage. That’s why here’s the Flypro as is and everything you need to get started with. You’ll get an easy counter app written in vanilla JavaScript using Flypro as an application architecture. You’ll also get the counter app written using React as a view library with Flypro implementation as well.
Moreover, if you’re writing a React application here’s a React Flypro bindings, which wrap React component to Flypro store and provide states as props and handlers as callbacks for your presentational component. All the docs and counter app example with React Flypro bindings also there. Just remember, all these packages were developed for educational reason. Enjoy.
If this article helped you, please help others by clicking that green heart below — thanks!
Roman Stremedlovskyi is a Senior Software Engineer, Frontend.
Software Engineering and Leadership. Let’s get in touch via LinkedIn.
