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,
- 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.
- The View: It renders the user interface and handles user interaction. Container views listen for store changes.
- 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 storeconst 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-vitalsreportWebVitals(); |
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.
- Model: It is a  backend that includes all the data logic.
- View: View is basically the frontend or graphical user interface of the application.
- 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 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. |
Â
