Quali sono i concetti fondamentali di Redux?

Question

Accepted Answer

**Redux** è un contenitore di stato prevedibile costruito su tre principi fondamentali: un **singolo store**, uno **stato in sola lettura** modificabile solo tramite **azioni**, e **reducer puri** che calcolano lo stato successivo. I dati scorrono in una sola direzione, rendendo i cambiamenti tracciabili. ## I tre principi ```text 1. Single source of truth — the whole app's state lives in ONE store object 2. State is read-only — you never mutate it; you DISPATCH actions to change it 3. Changes via pure reducers — (state, action) => newState, no side effects ``` ## I componenti e il flusso ```js // STORE — holds the single state tree const store = configureStore({ reducer: rootReducer }); // ACTION — a plain object describing what happened const action = { type: "counter/incremented", payload: 1 }; // REDUCER — pure function: given state + action, returns NEW state function counterReducer(state = { value: 0 }, action) { switch (action.type) { case "counter/incremented": return { ...state, value: state.value + action.payload }; // new object default: return state; } } // DISPATCH — the only way to trigger a change store.dispatch(action); // SELECT — read state store.getState().counter.value; ``` ## Il ciclo ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` Questo rigoroso flusso unidirezionale significa che ogni cambiamento di stato è il risultato di un'azione dispatch elaborata da una funzione pura — completamente tracciabile. ## Utilizzarlo in React ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## Perché i vincoli? ```text Predictability — every change is an explicit, logged action Debuggability — time-travel debugging, action replay (Redux DevTools) Testability — pure reducers are trivial to unit test ``` (Nota: Redux moderno utilizza **Redux Toolkit**, che riduce drasticamente il boilerplate mantenendo questi concetti.) ## Perché è importante I concetti fondamentali di Redux — singolo store, azioni, reducer puri, flusso unidirezionale — rendono lo stato dell'applicazione **prevedibile e tracciabile**, che è il suo valore principale per le app di grandi dimensioni. Comprendere store/action/reducer/dispatch/select è essenziale per i molti codebase che utilizzano Redux, e i principi (aggiornamenti immutabili, reducer puri, flusso unidirezionale) si ripresentano in quasi tutte le librerie di stato. Il compromesso è il boilerplate, che Redux Toolkit affronta preservando questi fondamenti.