React Apps

REACT NATIVE

Per creare semplici app si puo’ utilizzare React Native, tenendo pero’ presente che allo stato attuale (Maggio 2018) questa teconologia risulta ancora in fase di sviluppo, con cambi anche drastici tra una release e l’altra.

Tools

E’ consigliabile utilizzare react-native (Nodejs) in congiunta a:

• Expo, per avere un feedback immediato anche su Device

• react-redux, per la gestione di uno stato globale che verra’ aggiornato

• http://graphql.org/learn/queries/ come interfaccia API

• https://www.apollographql.com/

• https://sentry.io/signup/ , sistema di logging

REDUX

Per sfruttare al meglio redux l’app verra’ strutturata suddividendo le Componenti in due grandi categorie:

• dumb , ovvero componenti presentazionali pure che utilizzano solo proprieta’.

• smart , estendono le dumb e contengono parte della logica di buisness: esse sono componenti che vengono connesse allo store via Redux.

Le dumb NON DEVONO contenere alcuna logica di Business: servono solo da interfaccia, in questo modo potranno essere riutilizzate anche in altre applicazioni.

Le smart invece si connettono tramite redux allo store, di conseguenza loro provvederanno ad aggiornare le proprieta della componente dumb, e tramite il dispatcher dello store propagheranno i cambiamenti di stato dell’applicazione mediante actions.

Se non di default, ricordarsi che per utilizzare il dispatcher e’ necessario settare la middleware redux-thunk.

Il dispacher risulta necessario in caso di operazioni asyncrone come chiamate ajax o fetch.

Refs

Costruzione app

• React Native: chat tutorial + EXPO
• React With JWT tokens
• Listener Middleware , proposta su come utilizzare Midlleware e separazione di responsabilita’ sulle api

Nozioni generali

• Ecma 6 - Symbols
• Funzionamento Middleware thunk
• Redux e Thunk
• Redux Doc + Middleware return, esempi della documentazione ufficiale di redux, che spiega l’utilizzo dei valori ritornati dalle middleware.
• Webpack + Express (1) , spiega bene il concetto
• Webpack + Express (2) , spiega bene alcuni dettagli

Da questa issue si evince il sunto delle middleware:

con next(action)

si fa in modo che l’azione venga successivamente passata alla middleware successiva e cosi’ via fino a raggiungere i reducers che aggiorneranno lo stato.

con return

The return value from the middlewares bubbles up through the middleware stack, and is ultimately accessible as the return value of Store.Dispatch(). For example, if one of the middlewares returns null, the return value of Store.Dispatch() will also be null, whereas if all middlewares return next(action), then the return value will be the returned value of next midlleware.

Quindi se una middleware ritorna una promessa, e tutte le precedenti middleware ritornano next(action), allora viene ritornata la Promessa! Per esempi vedere la documentazione sopra citata (middleware return).

Code Samples:

/topics/react-app/