Open In App

Difference between Flux and MVC

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the difference between Flux vs MVC with the working code examples.

1. Flux:

Flux was created by facebook and was initially used by Facebook for building client-side web applications. The Flux application has 3 major parts the dispatcher, the store, and the view.

  1. The Store: we can think of the Store as a state manager, and it can change the store by 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.

Steps to create 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

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: 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;


Javascript




src/actions/index.js:
 
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};


Javascript




//src/index.js
 
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();


Javascript




//src/reducers/index.js
 
import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import {combineReducers} from "redux";
 
 
const allReducers=combineReducers({
    counter:counterReducer,
    isLogged:loggedReducer,
});
 
export default allReducers;


Javascript




//isLogged.js


Javascript




const loggedReducer=(state=false,action)=>{
    switch(action.type){
        case "SIGN_IN":
            return true;
        case "LOG_OFF":
            return false;
        default:
            return false;
    }
}


Javascript




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


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

npm start

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. View: View is basically the frontend or graphical user interface of the application.
  3. Controller: The brains of the application that controls how data is displayed.

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

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Below is the code example of the MVC write the below code into app.jsx, code.jsx and view.jsx.

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>
  );


Javascript




//Code.jsx
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


Javascript




//View.jsx
 
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


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

npm start

Output:

Difference between Flux and MVC:

Flux

MVC

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

Flux architecture has these main components:

MVC architecture has these main components:

In the flux the data flow direction is Unidirectional. In the MVC the data flow direction is Bidirectional
There is Multiple Store in Flux. There is no concept of Store in MVC.
In Flux the Store handles all the logic In MVC the Controller handles the entire logic.
It supports client-side frameworks. It supports both client-side and server-side frameworks.
It supports front-end frameworks like React, AngularJS, Vue.js. It supports both front-end and back-end frameworks.


Last Updated : 12 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads