Redux è un contenitore di stato prevedibile per le app JavaScript.

Redux è un modello e una libreria per la gestione e l'aggiornamento dello stato dell'applicazione , utilizzando eventi chiamati " azioni ".
Funge da archivio centralizzato per lo stato che deve essere utilizzato nell'intera applicazione.
Lo stato può essere aggiornato solo in modo prevedibile .

Pacchetti redux richiesti

• redux — npm installa redux
• react-redux — npm install react-redux

1. Azioni:

Un'azione è un semplice oggetto JavaScript che ha un typecampo.
Puoi pensare a un'azione come a un evento che descrive qualcosa che è accaduto nell'applicazione.

Un oggetto azione può avere altri campi con informazioni aggiuntive sull'accaduto. Per convenzione, mettiamo queste informazioni in un campo chiamatopayload

return {
    type: "INCREMENT",
    payload: intNumber
   }

Un riduttore è una funzione che riceve la corrente statee un actionoggetto decide come aggiornare lo stato se necessario e restituisce il nuovo stato: (state, action) => newState.
Puoi pensare a un riduttore come a un listener di eventi che gestisce gli eventi in base al tipo di azione (evento) ricevuto.

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

3. Negozio:

Redux Store riunisce lo stato , le azioni e i riduttori che compongono la tua app.
Ogni negozio Redux ha una singola funzione di riduzione della radice .

import { createStore } from "redux";
import rootReducer from "./reducers/index";
const store = createStore( rootReducer );
export default store;

Esempio Redux:

Creazione di azioni:
src/actions/index.js

export const incrementNumber = () => {
return {
type: "INCREMENT",
payload: intNumber
}
}

export const decrementNumber = () => {
return {
type: "DECREMENT"
}
}

Creazione riduttori:
src/reducers/plusminus.js

const fase iniziale = 0;

const plusMinusReducer = ( state = initialStage, action ) => {
switch( action.type ) {
case "INCREMENT": return state + 1;
caso "DECREMENTO": stato di ritorno - 1;
default: stato di ritorno;
}
}

esportazione predefinita plusMinusReducer;

src/riduttori/index.js

import plusMinusReducer da "./plusminus";
import { combineReducers } da "redux";

const rootReducer = combineReducers({
plusMinusReducer
});

esporta rootReducer predefinito;

Creazione del negozio:
store.js

importa { createStore } da "redux";
importa rootReducer da "./reducers/index";

const store = createStore(rootReducer);

esporta il negozio predefinito;

Store provider su App:
index.js

import React da 'react';
importa ReactDOM da 'react-dom';
importa './index.css';
importa App da './App';
importa reportWebVitals da './reportWebVitals';
importa negozio da "./store";
import { Provider } da "react-redux";

store.subscribe(() => console.log( store.getState() ) );

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

reportWebVitals();

Azioni di chiamata dalla vista:
App.js

importa './App.css';
import {useSelector, useDispatch} da "react-redux";
import {incrementNumber, decrementNumber } da "./actions/index";

funzione App() {

const myState = useSelector((stato) => state.plusMinusReducer );
const spedizione = useDispatch();

return (
<>
<div className="container">
<h1>Incremento/decremento del contatore</h1>
<h4>Utilizzo di React e Redux</h4>

<div className="quantity">
<a className="quantity__minus" title="Decrement" o nClick={(event) => dispatch(decrementNumber()) } ><span>-</span></a>
< input type="text" name="quantity" className="quantity__input" value={ myState }/>
<a className="quantity__plus" title="Increment" onClick={(event) => dispatch(incrementNumber()) } ><span>+</span></a>
</div>
</div>
</>
);
}

esporta l'app predefinita;

Per maggiori dettagli fare riferimento al documento redux