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

. State:

. Modèle de votre application

. N'importe quel type

. Va venir wrapper vos besoins dans un

Observable.

observable({})

@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?

https://github.com/LWroblewski/todo-list