Difference between Flux and MVC

Photo of Namachila Namachila Send an email October 13, 2025
0 2 4 minutes read

Introduction: In this article, we will see the Difference between Flux vs MVC.

1. Flux: Flux is created by Facebook, and was initially used by Facebook for building client-side web applications. The Flux application has 3 major parts are the dispatcher, the store, and the view ( react component). Here, in layman terms,

  1. The Store: we can think of the Store as a state manager, and it can change the store on listening to actions. It notifies the views to update.
  2. The View: It renders the user interface and handles user interaction. Container views listen for store changes.
  3. The dispatcher: It broadcasts actions to all registered stores.

Advantages of using Flux:

  • Flux manages complicated interactions between data resources.
  • Flux has a unidirectional data flow. Which means it is easier to manage the data flow.

Some popular implementations of flux are Redux, Flummox, and Fluxxor.

Example: Let’s understand flux using example.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install redux react-redux

Step 4: To get the react server up and running use the following command

npm start

Project Structure: It will look like the following.

counter.js: This file is for creating the counter reducer for incrementing and decrementing number. 

Javascript




const counterReducer=(state=0,action)=>{
    switch(action.type){
        case "INCREMENT":
           return state+1;
        case "DECREMENT":
            return state-1;
        default:
            return state;
    }
}
 
 
export default counterReducer;
 





















isLogged.js: This file is for creating the logged reducer.








Javascript


















 






 




 



























const loggedReducer=(state=false,action)=>{


    switch(action.type){


        case "SIGN_IN":


            return true;


        case "LOG_OFF":


            return false;


        default:


            return false;


    }


}












































src/reducers/index.js: This file is for combining the counterReducer and loggedReducer into a single reducer named allReducers.






Javascript


















 






 




 



























import counterReducer from "./counter";


import loggedReducer from "./isLogged";


import {combineReducers} from "redux";


 


 


const allReducers=combineReducers({


    counter:counterReducer,


    isLogged:loggedReducer,


});


 


export default allReducers;












































src/index.js: This file is for creating a store and passing the store data to the entire app.






Javascript


















 






 




 



























import React from 'react';


import ReactDOM from 'react-dom';


import './index.css';


import App from './App';


import reportWebVitals from './reportWebVitals';


import {createStore} from "redux";


import allReducers from './reducers';


import {Provider} from "react-redux";


 


//Creating store


const store=createStore(


  allReducers,


  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());


 


 


ReactDOM.render(


  <React.StrictMode>


   


  //Wrapping our entire app inside the provider so that we can access the store


  //from anywhere in our app.


    <Provider store={store}>


      <App />


    </Provider>


  </React.StrictMode>,


  document.getElementById('root')


);


 


// If you want to start measuring performance in your app, pass a function


// to log results (for example: reportWebVitals(console.log))


// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals


reportWebVitals();












































src/actions/index.js: This file is for creating an action which will be used to trigger the reducers to perform the various tasks.






Javascript


















 






 




 



























const increment=()=>{


    return{


        type:"INCREMENT",


    }


}


 


export default increment


 


const decrement=()=>{


    return{


        type:"DECREMENT",


    }


}


 


const signin=()=>{


    return{


        type:"SIGN_IN",


    }


}


 


const logoff=()=>{


    return{


        type:"LOG_OFF",


    }


}


 


export {decrement,signin,logoff};












































src/app.js file: This will received all the data passed down by the store in src/index.js file and perform various actions. In this case, we call counter reducer and isLogged reducer using increment, decrement, signing, and logoff actions.






Javascript


















 






 




 



























import React from "react";


import './App.css';


import {useSelector,useDispatch} from "react-redux";


import increment,{decrement,signin,logoff} from "./actions";


 


function App() {


  const counter=useSelector(state=>state.counter);


  const isLogged=useSelector(state=>state.isLogged);


  const dispatch = useDispatch();


 


  function incr(){


    dispatch(increment());


  }


  function dcr(){


    dispatch(decrement());


  }


 


  function sin(){


    dispatch(signin());


  }


 


  function sout(){


    dispatch(logoff());


  }


  return (


    <div className="App">


      <h1>Hello {counter}</h1>


      <button onClick={incr}>+</button>


      <button onClick={dcr}>-</button>


 


      {isLogged?<h3>Display only if the user is logged</h3>:<h3>User is not logged in</h3>}


      {!isLogged?<button onClick={sin}>Login</button>:<button onClick={sout}>Log out</button>}


    </div>


  );


}


 


export default App;












































Output:




2. MVC: The MVC is the first web architecture introduced by Trygve Reenskaug in 1979 to build the user interface. The MVC is an acronym for Model View Controller.


    

  1. Model: It is a  backend that includes all the data logic.
    2. 

  2. View: View is basically the frontend or graphical user interface of the application.
    3. 

  3. Controller: The brains of the application that controls how data is displayed.
    4. 



Example: Let’s understand mvc through example.


Project Structure: It will look like the following.






App.js file






Javascript


















 






 




 



























import "./styles.css";


import Code from "./Code"


export default function App() {


  return (


    <div className="App">


      <h1>Hello User</h1>


      <h2>Lets see MVC in act</h2>


      <Code />


    </div>


  );












































Code.jsx: In this file,  we will be handling the logical part of the application i.e. functions for handling the button clicks.






Javascript


















 






 




 



























import React,{useState} from 'react';


import View from "./View";


 


function Code(){


  const[toggle,setToggle]=useState(false);


 


  function handleClickTrue(){


    setToggle(true);


  }


 


  function handleClickFalse(){


    setToggle(false);


  }


 


 


  return(


    <div> 


    {toggle&&<h1>Hello world</h1>}


     


//Passing handleClickTrue and handleCLickFalse functions as props to View.


     


      <View isTrue={handleClickTrue} isFalse={handleClickFalse}/>


    </div>


  );


}


 


export default Code












































View.jsx: In this file we will be handling the visual section of the application.






Javascript


















 






 




 



























import React from 'react';


 


function View({isTrue,isFalse}){


  return(


    <div> 


 


      <button onClick={isTrue}>Render Hello World</button>


      <button onClick={isFalse}>Remove Hello World </button> 


      


    </div>


  );


}


 


export default View












































Output:




Difference between Flux and MVC:








 


Flux




MVC






1.
Flux application architecture is designed to build client-side web apps.
MVC application architecture is designed for developing User Interfaces.




2.


Flux architecture has these main components:






MVC architecture has these main components:








3.
In the flux the data flow direction is Unidirectional.
In the MVC the data flow direction is Bidirectional




4.
There is Multiple Store in Flux.
There is no concept of Store in MVC.




5.
In Flux the Store handles all the logic
In MVC the Controller handles the entire logic.




6.
It supports client-side frameworks.
It supports both client-side and server-side frameworks.




7.
It supports front-end frameworks like React, AngularJS, Vue.js.
It supports both front-end and back-end frameworks.








 




Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!




			
		


				

			

				

						
							Photo of Namachila
						
					Namachila
						
							
							Send an email
						
					October 13, 2025
0 2  4 minutes read 


		

					

		


		

		

		

		
	


	
	


		
		


								

						
							Photo of Namachila						
					

					
			


											
Namachila

						
				

									


							

			

		

		


	





			

			
			

			

	

				


					

						
Related Articles

					


					


					
							


								
			
								
Dear Samsung, please make this.


								
2 days ago
							


						
							


								
			
								
The wait is over: Google just released Snapseed 4.0 for Android with a new pro camera


								
3 weeks ago
							


						
							


								
			
								
What to watch this weekend: Sally Field bonds with a talking octopus and British civil servants become ‘Legends’


								
3 weeks ago
							


						
							


								
			
								
Samsung Galaxy Buds 3 Pro receive stability update


								
3 weeks ago
							


						
					

				


				


		

		
	

		
Leave a Reply 
Your email address will not be published. Required fields are marked *
 
 



 


 


 


	

	

	



	


	




	

	
	
	






		

		
		
			
			Back to top button