FabioBiondi.
0
CatalogoInfoIl tuo programma
← tutti i corsi
// corso · 2026react

State management con Redux Toolkit

Gestire lo stato globale con Redux Toolkit, RTK Query e TypeScript.

Durata
12h
Sessioni
3 da 4h
Livello
Avanzato
[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

INTRODUZIONE

React fornisce gli strumenti fondamentali per l'organizzazione della user interface. Tuttavia, le attività che il front-end deve svolgere sono sempre più complesse e le interfacce utente (UI), di conseguenza, stanno diventando sempre più sofisticate: gestione di un data-flow molto articolato, componenti che devono rimanere in sync tra di loro, integrazione unit test, refactoring e debug sono solo alcune delle attività ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente.
§02

REDUX

Redux nasce con l’obiettivo di separare nettamente gli aspetti architetturali dalla user interface, semplificando la gestione dello stato applicativo e rendendo il codice molto più manutenibile, testabile e scalabile grazie alla possibilità di isolare e tracciare ogni fase del ciclo di vita dell'applicazione.
§03

REDUX TOOLKIT

In questo corso utilizzeremo Redux Toolkit (RTK) e RTK Query, una libreria realizzata dallo stesso team di Redux allo scopo di:
  • semplificare l'utilizzo di Redux in React
  • ridurre draticamente la quantità di codice e dipendenze
  • rendere Redux "opinionated", definendo regole e buone pratiche
  • fornire strategie per il data fetching, la gestione della cache, hooks per gestione di stato di pending, errori e molto altro grazie al nuovo modulo incluso, Redux Toolkit Query, molto simile a TanStack Query ma perfettamente integrato in Redux.
    • §04

    Redux Dev Tools

    Nelle applicazioni che utilizzano Redux è possibile sfruttare una fantastica estensione per i browser tramite la quale monitorare ogni fase della tua applicazione, semplificando le operazioni di manutenzione e debug: history delle azioni, modifiche allo stato applicativo, differenze tra stato precedente e successivo, time travel debugging, export e import di uno snapshot dello stato e molto altro.

    Può sembrare banale ma credetemi se vi dico che buona parte dei vantaggi che si ottengono dall'utilizzo di Redux dipendono da questo strumento. È davvero incredibile quanto siano utili per capire cosa stia accadendo nella tua applicazione e per comprendere, ad esempio, quale degli step precedenti hanno generato un bug.

    È anche possibile salvare uno snapshot dell'applicazione per caricarlo successivamente, anche su altri PC, e ri-creare uno scenario specifico (ad es. quello che ha causato un bug).
    §05

    OBIETTIVO DEL CORSO

    Integrare e utilizzare lo state manager Redux in applicazioni React utilizzando Redux Toolkit e Typescript
    [ programma ]

    Cosa vediamo,
    in dettaglio.

    Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
    La maggior parte del corso è live-coding, con esempi pratici.

    4 moduli · 38 argomenti
    1. M01

      FUNDAMENTALS

      • TEORIA: Principi fondamentali di Redux
      • Immutable State
      • Pure vs Inpure functions
      • Containers vs Presentational components
      • Concetto di "Store"
      • Cosa sono i "reducer"
      • "Actions"
      • Side "Effects"
      • State "Selectors" e memoization
      • Introduzione ai Redux DevTool
      • Data Architecture e Stateless UI
      • La libreria React-Redux
      • La libreria Redux Toolkit e Toolkit Query
      • Immutability vs ImmerJS
      • Debugging e Potenzialità dei Redux Dev tools
      • Organizzazione progetti enterprise
    2. M02

      REDUX & REDUX TOOLKIT (RTK)

      • Creazione progetti React con Redux & Redux Toolkit
      • Configurare lo Store e i Redux DevTools
      • Utilizzo del componente Provider
      • Gestione stato tramite Reducer e combineReducer
      • Tipizzazione dello store
      • Redux Hooks: useSelector and useDispatch
      • Dispatch di azioni
      • Selectors semplici e compositi (useSelector)
      • Creare reducer con l'hook createReducer
      • Gestire lo stato con l'hook createSlice
      • Differenti tecniche per la gestione degli errori
      • Side Effect, XHR e operazioni asincrone con Redux Thunk
    3. M03

      REDUX TOOLKIT QUERY (RTK Query)

      • Introduzione a RTK Query
      • L'hook createAPI
      • Comunicazione con API: gestione dati e stato di errore, successo e pending
      • Prefetch
      • Mutations
      • Gestione Cache
    4. M04

      ADVANCED TOPICS

      • createAsyncThunk
      • extraReducers
      • Custom Middlewares
      • Entities: createEntityAdapter
    [ corsi propedeutici ]

    Prima di questo corso...

    [ corsi correlati ]

    Potrebbero piacerti anche...

    Pronto a portarlo nel tuo team?

    Contattami →