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