Come Redux è Cambiato e Perché Viene Ancora Aggiunto ai Nuovi Progetti

Ricordi i tempi in cui un semplice contatore Redux richiedeva la creazione di tre file separati, la dichiarazione di una dozzina di costanti e la scrittura di un enorme switch-case nel reducer? Per questo, migliaia di sviluppatori sono arrivati a odiare la libreria. Ma Redux non è più quello del 2015.

Gli sviluppatori hanno riconosciuto il problema in tempo e hanno rilasciato Redux Toolkit (RTK). Oggi è diventato lo standard per lavorare con la libreria e ha rimosso quasi tutto ciò per cui Redux veniva criticato.

Perché Hai Bisogno di un Gestore di Stato Globale

Nelle piccole applicazioni React, puoi cavartela facilmente con il passaggio normale delle props o con React Context integrato. I problemi iniziano quando il progetto cresce. Quando i dati di un modulo devono aggiornare simultaneamente una sidebar, l'header del sito e inviare analytics, la catena di props diventa un caos.

Redux mantiene lo stato dell'applicazione in un oggetto (store). Non modifichi questo oggetto direttamente. Invece, invii un'azione e funzioni pure, i reducer, calcolano il nuovo stato basandosi su quello precedente.

Questo approccio garantisce una chiara prevedibilità. Se qualcosa si rompe nell'applicazione, attraverso Redux DevTools puoi visualizzare la cronologia completa dei cambiamenti di stato e riavvolgere il tempo, tracciando le azioni dell'utente passo dopo passo.

Come Redux Toolkit Ha Semplificato la Vita

Prima, per aggiornare un singolo campo dovevi tracciare manualmente l'immutabilità dell'oggetto, creando pesanti spread.

Redux Toolkit ha Immer integrato. Ora il codice all'interno dei reducer viene scritto come se stessi mutando lo stato direttamente, e la libreria converte automaticamente questo in un aggiornamento immutabile sicuro.

Vediamo un esempio base di contatore:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

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

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

Niente file separati con i tipi di azione. La funzione createSlice ha creato sia il reducer che i generatori di azione per te.

Quando Redux È Necessario e Quando È Meglio Farne a Meno

Il creatore della libreria Dan Abramov ha scritto "You Might Not Need Redux" anni fa. Questo consiglio è ancora rilevante oggi.

Redux torna utile in situazioni specifiche:

• C'è molti dati che cambiano attivamente nel tempo e vengono utilizzati in diverse parti dell'applicazione.
• La logica di aggiornamento dello stato è complessa o richiede una sequenza rigorosa.
• È necessario un debug comodo con una cronologia trasparente di tutti gli eventi.
• Molte persone lavorano nel team ed è necessario un singolo pattern chiaro per la gestione dei dati.

Se hai un'applicazione semplice dove i dati devono solo essere passati un paio di livelli in basso, tirare dentro Redux qui non ne vale la pena. Ulteriori astrazioni complicheranno solo il codice.

Avvio Rapido

Il modo più semplice per avviare un progetto è con Vite e un template già pronto di Redux Toolkit e TypeScript:

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Per Next.js, c'è un template già pronto da Vercel:

npx create-next-app --example with-redux my-app

Se stai aggiungendo la libreria a un progetto esistente, è sufficiente installare due pacchetti:

npm install @reduxjs/toolkit react-redux

In Conclusione

Il core di Redux pesa circa 2 KB. La libreria ha da tempo superato l'era del codice boilerplate infinito. Abbinato a Redux Toolkit, ottieni uno strumento rigoroso e prevedibile per la gestione dello stato che funziona ottimamente nei progetti di grandi dimensioni.