Difference between Flux and MVC

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;

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

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

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

//isLogged.js

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

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

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

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