Nerd For Tech
Published in

Nerd For Tech

Flux vs Redux

If you are familiar with the design pattern and architecture you might have an idea of Flux and Redux but still, you might not have a clear picture of it. We are going to learn about the concept of Flux and Redux and the purpose of using them. Finally, you will get an idea of what is recommended for your projects.

Image result for flux vs redux

Introduction to Flux Architecture

Flux is an architecture that Facebook uses internally when working with React. Flux is not a framework or a library, it is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow which mean updating views flow in a single direction:

That said, Facebook does provide a repo that includes a Dispatcher library. The dispatcher is a sort of global pub/sub handler that broadcasts payloads to registered callbacks.

An ordinary Flux architecture will contain this Dispatcher library, along with NodeJS’s Event Emitter module in order to set up an event system that helps manage an application state.

Individual components explained better about flux:

1. Actions — are collections of methods that are called within views or anywhere else for that matter to send actions to the Dispatcher. Actions are the actual payloads that are delivered via the dispatcher.

2. Dispatcher — is basically the manager of this entire process. It is the central hub for your application. The dispatcher receives actions and dispatches the actions and data to registered callbacks. One of the coolest parts of the provided Dispatcher module is the ability to define dependencies and marshall the callbacks on the Stores.

3. Stores — manage the application state for a particular domain within your application. From a high level, this basically means that per-app section, stores manage the data, data retrieval methods, and dispatcher callbacks.

4. Controller Views — they are really just React components that listen to change events and retrieve Application state from Stores. They then pass that data down to their child components via props.

Introduction to Redux Architecture

Redux is an open-source JavaScript library for managing application states similar to flux architecture but in a quite different way, it was created by Dan Abramov and Andrew Clark in 2015. It is most commonly used with libraries such as React or Angular for building user interfaces. Redux architecture introduces new components like:

  • Reducer: Logic that decides how your data changes exist in pure functions
  • Centralized store: Holds a state object that denotes the state of the entire app

This architecture, the application event is denoted as an Action, which is dispatched to the reducer, the pure function. Then reducer updates the centralized store with new data based on the kind of action it receives. The store creates a new state and sends an update to view. At that time, the view was recreated to reflect the update.

Data Flow

Flux and Redux enforce unidirectional flow to ensure clean data flow architecture. The significant benefit of a unidirectional approach is that since the data flows through the application in a single direction you can have better control over it.

Type of Stores

Flux includes multiple Stores but Redux includes a single Store per-app because than keeping multiple stores in the application redux keeps everything in one region of the app but flux uses multiple stores to track multiple states.

You might think why redux enforce a single global than multiple stores? consider the user action uses multiple stores, there is a higher scope of forgetting to handle the action in certain stores, this might cause an issue in application management. It is difficult to obtain an outline of what the user state includes and updates are a major issue with multiple stores in Flux. These issues lead the user to what a single centralized store in Redux offers, all the changes in Redux are made through a pure function called Reducers this solves the conflict of flux.

How Debugging is handled in the architecture?

Flux architecture includes singleton dispatcher and all actions are passing through that dispatcher. This design defends hard-to-debug cascading updates. Also helpful for actions that include side effects like making the code clearer, updating other views and debug by new developers.

Redux doesn’t have a dispatcher, it is a lot easier to manage data and debug because the state of your entire app is maintained within a single Store as mentioned above. In addition, the state of all components depends on one object tree. It is possible to log all the actions that have been performed to get to a certain point. This empowers you to look at the application as a whole and debug easily. On top of this, it offers a great Live Code-Editing option with a time-traveling debugging feature. This feature enables you to rewind and replay your debugging action.

Where to be used?

Flux and Redux, in contrast, are largely a front-end design pattern. Flux addresses the problems of handling the application state on the client-side. Hence, the front-end frameworks & libraries like Angular2, Vue.js, and Polymer can all have a natural interaction with Flux.

When comparing the usability of Flux vs Redux, both score the same. But Redux is not just a state management library, it offers several benefits for your front-end apps, including ensuring data consistency, sharing data between components and providing templates for code organization. Redux is primarily associated with React, but it can work well with other libraries as well, including Vue.js, AngularJS, Ember, Backbone.js, Meteor, and Polymer.

Conclusion

I will not recommend selecting Flux nor Redux, you consider all these comparisons between Flux vs Redux and you must have a good knowledge of both architecture by now, you should think about what suits best for the project. It completely depends on the technologies you adopt, the aim of your application as well as the paradigm you like to use. Here is result of google trend which shows the usage of Flux and Redux globally for the past year.

Reference

--

--

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