What is the Flux
Application Architecture?

Data moves in one direction through your application.

A Flux Example

Loading the ToDo Items

Creating a New ToDo Item

  1. The component handles the form submission by calling its own callback.

Flux vs. MVC

  1. “MVC” actually means “MV*” in the land of JavaScript.
  2. Flux is not simpler than MV*.
  3. Flux keeps things more predictable than MV*.

“MVC” actually means “MV*” in the land of JavaScript.

Basic MVC Data Flow

Flux is not simpler than MV*.

Complex MVC Data Flow
Basic Flux Data Flow
Complex Flux Data Flow

Flux keeps things predictable.

Difficulties of Flux

  • It involves writing more boilerplate code
  • Migrating existing resources can be a big task
  • Unit testing can be difficult without good structure

Have you tried Flux?

--

--

--

Software Engineer at Chegg. Formerly React Core member. Views are my own. Find me at https://github.com/flarnie

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Cypress’s command execution order and Chainables

JAMstack series part 2 of 4 Top JavaScript frameworks

10 Javascript Interview Question

Testing React with jest, jest-axe, and react-testing-library

Life of a Programmer Explained with Humour

Scrolling 40 000 elements with 60FPS

Learn TypeScript — The Ultimate Beginners Guide : Object-oriented Programming

Using JavaScript for everything — The pros and cons

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Flarnie Marchan

Flarnie Marchan

Software Engineer at Chegg. Formerly React Core member. Views are my own. Find me at https://github.com/flarnie

More from Medium

When In Doubt, Clone It Out

Phase 1 and How I Found About APIs the Hard Way

Using Switch Statements Conditionals in Javascript

How to Create a Form Reset Button Using Vanilla JavaScript & Bootstrap

Search form with search button and a reset button