Intro

Building a web app which can scale Is not easy. As your project grows, you may get frustrated with how difficult it is to add a new feature now than at the beginning of the project. To solve this state management issue, companies and developers started to use different patterns and solutions. One of them is Flux.

This article contains:

• Description and deep dive into what is Flux
• Flux advantages
• React and Flux compatibility
• Redux and Flux differences
• Flux and MVC differences

What Is Flux

Facebook created Flux for building client-side web applications. It is a unidirectional data flow pattern. It is not a library or a framework, It is a kind of architecture that is used when the project has dynamic data, and that data needs to keep being updated in an effective manner.

Advantages of Flux are:

• Reduced runtime errors
• A unidirectional data flow pattern is easy to understand
• Application parts are decoupled
• Easier to maintain

Flux versus Mode-View-Controller (MVC)

A question may appear of why use Flux instead of MVC architecture.

In MVC, the relationship between components gets complicated and thus the project is not as scalable.

As shown above, the single-directional data flow concept is used and thus It gets less complex. With Flux, we take these controllers and break them apart into better-named things.

Flux components

View. This component is responsible for rendering the UI. Whenever a user interacts with UI and an event occurs, It fires off the action. View component is informed by the store If a change has occurred thus telling View to re-render. This action could be “Add Post”, “Send Message”, etc.

Action. This component handles all the events that are passed by the view component. If the user is trying to view a post or created one, an API call may be made and the Action component handles that.

An example of a payload from View to Action:

{
  actionType: "POST",
  data: {
    title: "This is a title",
    author: "Johnny Bravo",
  }
}

Action types are needed so that dispatcher knows what to do. These types should be constants so that no typos occur.

Dispatcher. It is a central hub for Flux and It manages all the data flow. Simply said it is a traffic controller. The dispatcher distributes actions to the stores and those stores register themselves and provide callbacks. The advantage of this is that the application gets more centralised and thus data flow is predictable.

Store. This is where the application has its state and logic A few things to mention about stores:

• A store manages multiple objects as the single source of truth
• Stores do not take other stores as dependencies
• Stores listen for actions and then act on them and emit an event.
• A store is the only part of Flux that can update the data.

Flux versus Redux

Redux was inspired by Flux and designed by Dan Abramov and Andrew Clark In 2015.

Redux is more constrained in comparison with Flux. In Redux you can’t:

• Mutate the store’s state and in Flux, you can mutate the state as you wish
• Expose the store’s state as easily as in Flux. Redux will just expose whatever is returned from the store’s reducer.

Clap clap clap! It means a lot to me :)

Conclusion

In conclusion, we can definitely say that the Flux pattern is among the most popular ways to handle data flow. Many projects are based on this pattern because It has Its advantages and a broad community of developers using Flux. However, there are other ways to implement flexible data flow management and this gives developers a choice, which Is needed, as projects differ one from another.

Follow to see future articles

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo