MVC vs Flux vs Redux

logos

MVC – Model View Controller: Architectural design pattern for developing UI

Flux: Application Architecture to build client-side web applications.

Redux: open source JavaScript library used to create UI; generally works with Angular and React development.

—————————————————————————————————————————————–

MVC: the core idea of MVC is Separaion of Concerns (separation of presentation from the model and Controller from the view)

Model: Maintain the data and behavior of an application
View: The UI logic that represents/ displays the data (model)
Controller: The logic that links the model to the View and external inputs (take user input, manipulate the model and causes the view to update)

mvcArch

Flux:

Actions: Helper methods that relay information to the dispatcher.

Stores: contains App’s logic and state (Models in MVC are single objects but Store in Flux can store anything)

Dispatcher: Coordinate the Actions and updates the Stores

View: same as the view in MVC but in the context of React & Flux (include Controller-Views for change events – retrieve App’s state from Stores)

fluxArch2

Redux:

Actions: Collection of functions to perform request on server (send data between the Store and the App)

Reducers: Update the state of the Store

Store: Holds the app state and supply the helper methods for accessing the state.

reduxArch

	MVC	Flux	Redux
Introduced	1976	Few years ago	2015
Architecture	Architectural Design Pattern for developing UI	Application architecture designed to build client-side web apps	Open-source JavaScript library used for creating the UI Generally works with react & Angular
Data flow Direction	Follows the bidirectional flow	Follows the unidirectional flow	Follows the unidirectional flow
Single / Multiple Stores	NA	Includes multiple Stores	Includes single Store
Store modifiable	NA	mutable	Immutable (read-only)
Handle biz. Logic	Controller	Store	Reducer
Handle debugging	Difficult due to bidirectional flow	Simple debugging with the dispatcher	Single Store makes debugging lot easier
Usage	In both client & server-side frameworks	client-side framework	client-side framework
Support	– Front-end frameworks like AngularJS, Ember, Backbne, Sprout & Knockout – Back-end frameworks like Spring, Ruby on Rails, Django, Meteor	Front-end framework like React, AngularJS, Vue.js & Polymer	Front-end frameworks like React, Vue.js, AngularJS, Ember, Backbone.js, Meteor & Polymer
Scability	Complex	Easily	–
key	Data binding	Events / actions	–
	Synchronous	Asynchronous	–