Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between Flux and MVC

  • Last Updated : 24 Nov, 2021

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. 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.

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 handleClickkTrue 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 logicIn 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.

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!