What is Flux architecture?

In Flatiron School’s immersive software engineering course, I learned MVC architecture by building projects with Ruby on Rails and I learned Flux architecture through building projects with React.

TK, et al. “Ruby on Rails: HTTP, MVC and Routes.” Medium, 27 December 2017, https://medium.com/the-renaissance-developer/ruby-on-rails-http-mvc-and-routes-f02215a46a84

MVC is simple to understand even for novice programmers. It stands for Model-View-Controller.

  • A Model interacts with the database and represents objects essential to the domain or nature of the application.
  • A View renders objects to the DOM through a web server.
  • A Controller -- this is where CRUD happens -- sits between the two to control how the data from the Model is manipulated and then represented to the View.

Flux architecture, however, is more complex to understand and from my perspective, much less intuitive. In Flux, everything begins with actions, which are like helper methods. An Action corresponds to something a user does in the UI (the View). It has parameters and a type (e.g. GET_POSTS) and is sent through a dispatcher to a Store where the state is updated and then the changed state is sent back to the UI via another Action (i.e. GET_POSTS_SUCCESS).

et al. “In-Depth Overview.” Flux, Facebook, https://facebook.github.io/flux/docs/in-depth-overview/

Since data is passed back and forth between the Model and Controller and the Controller and the View, MVC is bidirectional. However, with Flux architecture, the flow is unidirectional because data flows into a Store and is kept there.

Show Comments

Get the latest posts delivered right to your inbox.