¿Cuál es la diferencia entre useContext y Redux?

useContext: useContext es un gancho que proporciona una forma de pasar datos a través del árbol de componentes sin pasar accesorios manualmente a través de cada componente anidado.

Sintaxis:

const Context = useContext(initialValue);

Estructura del proyecto: Se verá así.

Ejemplo: en este ejemplo, App.js envía datos al componente ComC con la ayuda de useContext.

Aplicación.js

import React, { createContext } from 'react';
import "./index.css";
import ComB from './ComB';
  
const Data = createContext();
  
export default function App() {
  return (
    <div className="App">
      <Data.Provider value={"Welcome to GFG"}>
        <ComB />
      </Data.Provider>
    </div>
  );
}
  
export { Data };

ComB.js

import React, { useState } from "react";
import ComC from "./ComC";
  
const ComB = () => {
  const [show, setShow] = useState(false);
  return (
    <>
      {show ? <ComC /> : null}
      <button onClick={() => setShow(!show)}>
        Click ME</button>
    </>
  );
}
  
export default ComB;

ComC.js

import React, { useContext } from 'react';
import { Data } from './App';
  
const ComC = ({ name }) => {
  const context = useContext(Data);
  return <h1>{context}</h1>
}
  
export default ComC;

Producción:

Redux: Redux es una biblioteca de gestión de estado utilizada en aplicaciones de JavaScript. Es muy popular para React y React-Native. Simplemente administra el estado y los datos de su aplicación.

Partes de construcción de redux:

1. Acción
2. reductor
3. Tienda

Estructura del proyecto: Se verá así.

Ejemplo: En este ejemplo, hemos creado dos botones, uno incrementará el valor y otro disminuirá el valor. Con Redux, estamos administrando el estado.

Aplicación.js

import React from 'react';
import './index.css';
import { useSelector, useDispatch } from 'react-redux';
import { incNum, decNum } from './actions/index';
  
function App() {
    
  const mystate = useSelector((state) => state.change);
  const dispatch = useDispatch();
  
  return (
    <>
      <h2>Increment/Decrement the number using Redux.</h2>
      <div className="app">
        <h1>{mystate}</h1>
        <button onClick={() => dispatch(incNum())}>+</button>
        <button onClick={() => dispatch(decNum())}>-</button>
      </div>
    </>
  );
}
  
export default App;

index.js (en la carpeta src/actions )

export const incNum = () => {
   return{ type:"INCREMENT"}
}
  
export const decNum = () => {
   return{ type:"DECREMENT"}
}

func.js

const initialState = 0;
  
const change = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT": return state + 1;
    case "DECREMENT": return state - 1;
    default: return state;
  }
}
  
export default change;

index.js (en la carpeta src/reducers )

import change from './func'
import {combineReducers}from 'redux';
  
const rootReducer = combineReducers({change});
  
export default rootReducer;

tienda.js

import {createStore} from 'redux';
import rootReducer from './reducers/index';
  
const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__());
  
export default store;

index.js (en la carpeta src )

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx'
import store from './store';
import { Provider } from 'react-redux';
  
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById("root")
);

Producción:

Alguna diferencia entre useContext y Redux: