State management
en Angular...
Avec @ngrx...
Ou MobX
Sommaire
. Angular & State Management
. Quelles solutions?
. Vanilla
. @ngrx
. MobX
. Alors que choisir?
Angular & State Management
. State Management?
. Gestion du modèle métier de l'application.
. Se complexifie au fur et à mesure que l'application grossit.
Angular & State Management
. Pas de solution "out of the box"...
. Possibilité de faire tout et n'importe quoi...
. D'où la création de librairies tierces, issues du
monde React.
Angular Vanilla
. Externaliser le modèle au sein de services.
. Utiliser des Subject pour abonner les Components aux modifications du modèle.
. Rester Immutable!
Angular Vanilla
Bon, c'est pas très carré tout ça...
Et si on regardait ce qui se fait chez la concurrence?
Genre... Sur React?
Redux
. Centralisation du store (modèle de données) et de ses actions de mise à jour.
Redux
. Modèle de données à UN endroit: le Store.
Redux
. Le Store gère la mise à jour de ses données.
Redux
. Les ACTIONS alertent d'un changement du Store.
Redux
. Le REDUCER définit et applique le changement au Store.
Redux
. Le STORE est l'élément central de la mécanique Redux.
Redux
. Le STORE est l'élément central de la mécanique Redux.
... Contient l'Application State.
... Offre des accesseurs aux données du state.
store.select(...), store.getState()
... Permet la mise à jour du state.
store.dispatch(action)
... Gère des souscriptions aux changements du state.
store.subscribe(...)
Redux
. L'UI va afficher les données du Store mises à jour.
Redux
Normalise la logique de votre application
Cycle de vie commun pour toutes les données
Courbe d'apprentissage...
@ngrx
. Implémentation Redux pour Angular.
. Profite de RxJS.
. Packages:
. @ngrx/store
. @ngrx/effects
. @ngrx/router-store
. @ngrx/store-devtools
. @ngrx/entity
@ngrx/store
. State Management pour applications Angular:
. State => single immutable data structure.
. Actions => décrivent les changements d'état.
. Reducers => retourne le nouveau state, à partir de l'ancien state et de l'action envoyée.
. Store => accès au State, et dispatch d'actions
@ngrx/effects
. "Side effects":
. Écoutent les actions @ngrx/store.
. Idéal pour des traitements "annexes", non liés à un Component.
@ngrx/effects
@ngrx/router-store
. Lie @ngrx/store au Router Angular:
. Dispatche des actions suite aux actions du Router.
. Permet de "chaîner" des traitements suite à des changements de route, etc.
@ngrx/entity
. Simplification du reducer avec la gestion des méthodes add, delete, update, etc.
. Rajoute un peu plus de configuration... Pour un intérêt bien précis.
@ngrx/store-devtools
. Permet d'utiliser le plugin Redux DevTools.
. https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md
MobX
Le calme après la tempête
MobX
. Plus de libertés
. Moins de prises de tête
. (Beaucoup) moins de code
MobX
MobX
. State:
. Modèle de votre application
. N'importe quel type
. Va venir wrapper vos besoins dans un
Observable.
observable({})
or
@observable
MobX
. State
@Injectable()
export class Account {
@observable transactions: number[] = [];
...
MobX
. Derivations
. Computed: Représente des données construites à partir du state.
@computed get deposits(): number[] {
return this.transactions.filter(t => t >= 0);
}
MobX
. Derivations
. Reactions: "side effects": mise à jour de l'UI, log, etc. suite à un changement du State.
MobX
. Actions:
. Mise à jour du State.
@action
deposit(money: number) {
this.transactions.push(money);
}
MobX
. Moins de refactoring
. Facile (?) à utiliser/comprendre
. Moins verbeux
. Conseillé dans des petites/moyennes équipes
. Conventions de code à définir
Conclusion
Questions?
