Unilateral Data flow con React, Flux e Redux

Sviluppo componenti in React, ES2015 e Webpack
18 aprile 2017
Web Pack e React
18 aprile 2017
Frontend Development

Unilateral Data flow con React, Flux e Redux

Flux è un pattern ideato dal team di Facebook per la creazione di architetture (client-side) solide e scalabili di livello Enterprise. Flux è stato creato appositamente per React, ma essendo un pattern architetturale può essere applicato anche ad altri framework. L’architettura offre i presupposti per creare strutture gerarchiche di componenti che utilizzano un flusso di dati unidirezionale per gestire il proprio stato applicativo.
La migliore implementazione di questo pattern è attualmente Redux e in questo corso verranno affrontati e descritti gli aspetti ed i principali casi d’uso che quotidianamente devono essere affrontati nella progettazione e nello sviluppo dell’architettura di un’applicazione React.

Prerequisiti

Il partecipante deve possedere conoscenza della libreria React. Per presentare gli argomenti verranno fornite delle configurazioni che utilizzano NodeJs e Webpack, una conoscenza pregressa di questi strumenti è consigliabile ma non necessaria.

 

Obiettivi formativi

Padroneggiare la teoria che regola flussi unilaterali di dati, progettare architetture utilizzando questo pattern e imparare ad applicare questi concetti in applicazioni React. Comprendere la libreria Redux e i suoi strumenti a supporto dello sviluppo.

 

Programma

Ambiente di sviluppo

  • Nozioni su npm e il suo utilizzo per sviluppare applicazioni web
  • Installazione e configurazione dei moduli npm, tra i quali:
    • Webpack
    • Redux
    • Redux DevTools
    • React
  • Utilizzo dei tool da riga di comando (CLI)

 

Le basi

  • Introduzione al pattern Flux
  • Differenze tra Flux e Redux
  • Redux: principi fondamentali
  • Azioni e Action Creators
  • Store
  • Reducers
  • One way data flow
  • Utilizzo in React con React-Redux

 

Redux: concetti avanzati

  • Middlewares
    • Motivazioni
    • Scenari d’utilizzo
  • Async Actions: come creare action creators asincroni
  • Async Flow: come creare flussi applicativi asincroni
  • Utilizzo in React con React-Redux
  • Concetti avanzati sulla gestione dei side-effects prodotti dagli Action Creators

 

Redux: utilità avanzate

  • combineReducers
  • applyMiddleWare
  • bindActionCreators
  • compose