Diferencia entre flujo y MVC

Introducción: en este artículo, veremos la diferencia entre Flux y MVC.

1. Flux: Flux es creado por Facebook y fue utilizado inicialmente por Facebook para crear aplicaciones web del lado del cliente. La aplicación Flux tiene 3 partes principales: el despachador, la tienda y la vista (componente de reacción). Aquí, en términos sencillos,

1. La Tienda: podemos pensar en la Tienda como un administrador de estado, y puede cambiar la tienda al escuchar acciones. Notifica a las vistas para actualizar.
2. La vista: representa la interfaz de usuario y maneja la interacción del usuario. Las vistas de contenedor escuchan los cambios de la tienda.
3. El despachador: Transmite acciones a todas las tiendas registradas.

Ventajas de usar Flux:

• Flux gestiona interacciones complicadas entre recursos de datos.
• Flux tiene un flujo de datos unidireccional. Lo que significa que es más fácil administrar el flujo de datos.

Algunas implementaciones populares de flux son Redux, Flummox y Fluxxor.

Ejemplo: Entendamos fluxusing ejemplo.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install redux react-redux

Paso 4: para poner en funcionamiento el servidor de reacción, use el siguiente comando

npm start

Estructura del proyecto: Tendrá el siguiente aspecto.

counter.js: este archivo es para crear el contador reductor para incrementar y disminuir el número. 

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: este archivo es para crear el reductor registrado.

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: este archivo es para combinar counterReducer y logReducer en un único reductor llamado allReducers.

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: este archivo es para crear una tienda y pasar los datos de la tienda a toda la aplicación.

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: este archivo es para crear una acción que se utilizará para activar los reductores para realizar las diversas tareas.

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

Archivo src/app.js: recibirá todos los datos transmitidos por la tienda en el archivo src/index.js y realizará varias acciones. En este caso, llamamos a counter reducer y isLogged reducer usando acciones de incremento, decremento, firma y cierre de sesión.

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;

Producción:

2. MVC: MVC es la primera arquitectura web introducida por Trygve Reenskaug en 1979 para construir la interfaz de usuario. El MVC es un acrónimo de Model View Controller.

1. Modelo: Es un backend que incluye toda la lógica de datos.
2. Ver: Ver es básicamente la interfaz gráfica de usuario o frontend de la aplicación.
3. Controlador : el cerebro de la aplicación que controla cómo se muestran los datos.

Ejemplo: Entendamos mvc a través del ejemplo.

Estructura del proyecto: Tendrá el siguiente aspecto.

archivo app.js

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: en este archivo, manejaremos la parte lógica de la aplicación, es decir, las funciones para manejar los clics en los botones.

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: En este archivo estaremos manejando la sección visual de la aplicación.

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

Producción:

Diferencia entre flujo y MVC: