Redux: cos'è, pattern di gestione dello stato in React Native

Q: In cosa differisce Redux da Context API in React?

Redux è una soluzione completa con Store, DevTools, Middleware e stato immutabile. Context API è un meccanismo integrato di React per passare dati senza props drilling. Context è adatto per temi globali e localizzazione, mentre Redux è per stati complessi con operazioni asincrone, caching e debug. Nelle applicazioni grandi, Context causa re-render indesiderati, mentre Redux con selector risolve questo problema.

Q: Cos'è Immer in Redux Toolkit?

Immer è una libreria per la gestione immutabile dello stato, integrata in Redux Toolkit. Immer permette di scrivere reducer come se si stesse mutando lo stato direttamente: state.value += 1. Sotto il cofano, Immer crea un oggetto proxy (draft), traccia le modifiche e restituisce un nuovo oggetto immutabile. Questo riduce il volume di codice del reducer del 50% ed elimina le mutazioni accidentali.

Q: Come testare Redux?

La logica di Redux viene testata isolatamente: Reducer — una funzione pura, basta chiamarla con diverse Action e controllare il risultato. Action Creator — verificare l'oggetto restituito. Thunk — mockare l'API, chiamare dispatch e verificare quali Action sono state dispatchate. Componente con useSelector — utilizzare Provider con uno Store di test nel renderer. Redux DevTools aiutano a scrivere test riproducendo una sequenza di Action da una sessione reale.

Q: Quando usare Redux invece di useState?

useState è sufficiente per lo stato locale di un singolo componente: testo di campo, apertura/chiusura modale. Redux è necessario quando lo stato è condiviso tra molti schermi, richiede sincronizzazione asincrona (dati dal server), deve persistere tra riavvii dell'applicazione (persist) o richiede debug con viaggio nel tempo. Per applicazioni piccole, Redux è eccessivo — usa invece Context + useReducer.

Q: Cos'è la normalizzazione in Redux?

Normalizr è una libreria per normalizzare dati annidati in una struttura Store piatta. Invece di memorizzare oggetti profondi come user.posts[0].comments, la normalizzazione crea dizionari: entities.users, entities.posts, entities.comments con riferimenti per ID. Questo semplifica l'aggiornamento di una singola entità in tutti i punti e accelera i selector. Redux Toolkit raccomanda dati normalizzati per modelli complessi.

Autore: IT Sectr Pubblicato: 2026-02-19 Tempo di lettura: 8 min

Redux è un contenitore prevedibile per la gestione dello stato per applicazioni JavaScript, creato da Dan Abramov nel 2015. Redux implementa un flusso di dati unidirezionale basato sull'architettura Flux: lo stato è memorizzato in un unico Store, modificato solo tramite funzioni Reducer pure e avviato tramite Action con Dispatch. Secondo npm Trends, Redux mantiene oltre 7 milioni di download settimanali, rimanendo lo standard per la gestione dello stato in React Native e nelle applicazioni web.

Punti chiave

Store — l'unica fonte di verità, che memorizza l'intero albero di stato dell'applicazione
Action — un oggetto con il campo type, che descrive l'intenzione di modificare lo stato
Reducer — una funzione pura (prevState, action) => newState senza effetti collaterali
Dispatch — il metodo dello Store per inviare una Action al Reducer
Middleware — un livello tra dispatch e reducer per operazioni asincrone e logging

Cos'è Redux?

Redux è un pattern architetturale e una libreria per la gestione dello stato, basato su tre principi: unica fonte di verità, stato di sola lettura e modifiche tramite funzioni pure. A differenza di MVC, dove il modello può modificare lo stato in modo imprevedibile, Redux garantisce deterministico: con gli stessi dati di input, il risultato è sempre lo stesso.

Redux è stato ispirato dall'architettura Flux di Facebook e dal linguaggio Elm. La differenza principale da Flux è un unico Store invece di molteplici. In Redux, tutto lo stato dell'applicazione — oggetti, array, flag di caricamento — è memorizzato in un unico albero. Questo semplifica il debug, i test e il debug con viaggio nel tempo. Lo sviluppatore può salvare l'intero Store, riprodurre una sequenza di Action e vedere come lo stato è cambiato ad ogni passo.

Secondo il sondaggio State of JS 2025, il 68% degli intervistati che utilizzano la gestione dello stato scelgono Redux o Redux Toolkit. Lo strumento è supportato da tutti i framework moderni: React, React Native, Angular, Vue e persino JavaScript vanilla senza framework.

Flusso di dati unidirezionale

Il flusso di dati unidirezionale è il principio chiave di Redux, in cui i dati si muovono rigorosamente in una direzione: View → Action → Dispatch → Reducer → Store → View. Nessun componente può modificare lo Store direttamente. Una View si sottoscrive solo alle modifiche tramite useSelector o connect e avvia le modifiche tramite dispatch.

Ciclo di lavoro di Redux: l'utente clicca un pulsante → il componente chiama dispatch({ type: 'INCREMENT' }) → lo Store passa l'Action al Root Reducer → il Reducer calcola un nuovo stato → lo Store notifica i sottoscrittori → la View si ri-renderizza con i nuovi dati. Questo ciclo garantisce che ogni modifica abbia una causa esplicita sotto forma di una Action specifica.

DevTools — uno strumento integrato di Redux per monitorare ogni Action, lo stato dello Store e il tempo di esecuzione. Lo sviluppatore vede un elenco di tutte le Action dispatchate, la differenza di stato (diff) prima e dopo, e può tornare a qualsiasi stato precedente. Questo rende il debug di stati complessi decine di volte più veloce rispetto alla registrazione convenzionale.

Componenti chiave di Redux

Store — un oggetto che contiene l'intero albero di stato dell'applicazione. Creato tramite configureStore (RTK) o createStore. Store fornisce tre metodi: getState() per la lettura, dispatch(action) per la modifica e subscribe(listener) per la sottoscrizione. In Redux Toolkit, Store include già middleware, DevTools e supporto per slice.

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action e Action Creator — una Action è un oggetto con il campo obbligatorio type (una costante stringa) e un payload opzionale (dati). Un Action Creator è una funzione che restituisce una Action. In Redux Toolkit, createAction viene utilizzato per generare Action con tipizzazione automatica.

Reducer — una funzione pura che riceve lo stato corrente e una Action, restituendo un nuovo stato. Un Reducer non deve: mutare lo stato (viene restituito un nuovo oggetto), chiamare API, generare numeri casuali o accedere a Date. L'immutabilità è garantita dall'operatore spread ... o da Immer (integrato in RTK).

Componente	Responsabilità	Vincoli
Store	Memorizzazione stato, dispatch, subscribe	Uno per applicazione
Action	Descrivere l'intenzione di modificare lo stato	Deve avere type
Reducer	Calcolare nuovo stato	Funzione pura, senza effetti collaterali
Dispatch	Inviare Action al Reducer	Sincrono per impostazione predefinita
Selector	Estrarre dati dallo Store	Memoizzazione tramite createSelector

Middleware e Redux Thunk

Middleware è una catena di funzioni inserita tra la chiamata dispatch e il momento in cui l'Action raggiunge il Reducer. Ogni middleware riceve l'API dello Store e può registrare, modificare, ritardare o annullare Action. Redux Thunk è il middleware standard per operazioni asincrone, che consente di dispatchare funzioni invece di oggetti.

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

Middleware popolari: Redux Thunk — per chiamate asincrone semplici, Redux Saga — per scenari complessi con saga generator (debounce, race, richieste parallele), Redux Observable — basato su RxJS per flussi reattivi. In Redux Toolkit, il middleware viene collegato tramite il parametro middleware in configureStore.

Secondo il sondaggio State of JS 2025, Thunk è utilizzato nel 72% dei progetti Redux, Saga nel 18% e Observable nel 5%. Per la maggior parte delle applicazioni, una combinazione di Thunk + RTK Query è sufficiente per coprire il 95% dei flussi di lavoro asincroni con dati.

Redux Toolkit e RTK Query

Redux Toolkit (RTK) è il modo ufficiale e raccomandato per scrivere logica Redux, rilasciato nel 2019. RTK include configureStore, createSlice, createAsyncThunk e createEntityAdapter, riducendo il boilerplate di Redux del 60-70%. Invece di creare manualmente Action Creator, Reducer e tipi, viene utilizzato un singolo createSlice.

TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) { state.value += 1 },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    }
  }
})

export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

RTK Query è una soluzione integrata per lavorare con API basata su Redux Toolkit. Permette di definire endpoint in modo dichiarativo tramite createApi con generazione automatica di hook, caching, invalidazione tag e aggiornamenti ottimistici. RTK Query sostituisce la scrittura manuale di Thunk, Reducer e Selector per ogni richiesta API.

Entity Adapter — l'utilità createEntityAdapter per normalizzare collezioni di entità. Fornisce reducer CRUD integrati, selector e ordinamento per array di oggetti. Se lo Store contiene elenchi di utenti, prodotti o ordini — Entity Adapter riduce il codice del reducer dell'80%.

Redux in React Native

React Native Redux è lo stack standard per applicazioni mobili in JavaScript. Redux si integra tramite Provider da react-redux, che avvolge il componente radice dell'applicazione. Gli hook useSelector e useDispatch forniscono ai componenti accesso allo stato senza props drilling. Persist — redux-persist salva lo Store in AsyncStorage o MMKV, ripristinando lo stato dopo il riavvio dell'applicazione.

Middleware per React Native: redux-flipper per il debug tramite Flipper, redux-observable per flussi reattivi con driver nativi, react-native-mmkv per archiviazione persistente veloce. Il plugin di navigazione redux-first-router collega gli schermi allo Store, consentendo di ripristinare lo stato dello schermo al ritorno.

In React Native, Redux viene utilizzato insieme a una strategia network-first: l'app tenta prima di caricare i dati dal server, poi li memorizza nella cache nello Store tramite RTK Query o redux-persist. La modalità offline si ottiene combinando Redux + NetInfo + una coda di Action per il reinvio quando la connessione viene ripristinata.

Domande frequenti

In cosa differisce Redux da Context API in React?

Redux è una soluzione completa con Store, DevTools, Middleware e stato immutabile. Context API è un meccanismo integrato di React per passare dati senza props drilling. Context è adatto per temi globali e localizzazione, mentre Redux è per stati complessi con operazioni asincrone, caching e debug. Nelle applicazioni grandi, Context causa re-render indesiderati, mentre Redux con selector risolve questo problema.

Cos'è Immer in Redux Toolkit?

Immer è una libreria per la gestione immutabile dello stato, integrata in Redux Toolkit. Immer permette di scrivere reducer come se si stesse mutando lo stato direttamente: state.value += 1. Sotto il cofano, Immer crea un oggetto proxy (draft), traccia le modifiche e restituisce un nuovo oggetto immutabile. Questo riduce il volume di codice del reducer del 50% ed elimina le mutazioni accidentali.

Come testare Redux?

La logica di Redux viene testata isolatamente: Reducer — una funzione pura, basta chiamarla con diverse Action e controllare il risultato. Action Creator — verificare l'oggetto restituito. Thunk — mockare l'API, chiamare dispatch e verificare quali Action sono state dispatchate. Componente con useSelector — utilizzare Provider con uno Store di test nel renderer. Redux DevTools aiutano a scrivere test riproducendo una sequenza di Action da una sessione reale.

Quando usare Redux invece di useState?

useState è sufficiente per lo stato locale di un singolo componente: testo di campo, apertura/chiusura modale. Redux è necessario quando lo stato è condiviso tra molti schermi, richiede sincronizzazione asincrona (dati dal server), deve persistere tra riavvii dell'applicazione (persist) o richiede debug con viaggio nel tempo. Per applicazioni piccole, Redux è eccessivo — usa invece Context + useReducer.

Cos'è la normalizzazione in Redux?

Normalizr è una libreria per normalizzare dati annidati in una struttura Store piatta. Invece di memorizzare oggetti profondi come user.posts[0].comments, la normalizzazione crea dizionari: entities.users, entities.posts, entities.comments con riferimenti per ID. Questo semplifica l'aggiornamento di una singola entità in tutti i punti e accelera i selector. Redux Toolkit raccomanda dati normalizzati per modelli complessi.

Riepilogo

Redux — un contenitore di stato prevedibile con un unico Store e Reducer puri
Action — un oggetto con type, Reducer — funzione pura, Dispatch — meccanismo di invio
Redux Toolkit — l'API ufficiale con createSlice, createAsyncThunk e RTK Query
Middleware — un livello per l'asincronia: Thunk, Saga, Observable
React Native si integra tramite Provider, useSelector e redux-persist per la modalità offline
DevTools — debug con viaggio nel tempo con riproduzione di ogni Action
Normalizr — normalizzazione dei dati per selector e aggiornamenti efficienti

Svilupperemo un'applicazione mobile chiavi in mano

IT Sectr crea applicazioni iOS e Android per startup e aziende dal 2017. Ti consulteremo e ti proporremo la soluzione migliore.

Discuti il progetto