Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:angular:ngrx [2018/11/12 20:41] – [Effects] sgariepy
+++ web:javascript:angular:ngrx [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 196: / Ligne 196: @@
     ) { }
-    // tslint:disable-next-line:member-ordering
     @Effect() loadCompanies$ = this.actions$
         .ofType(companyActions.LOAD_COMPANIES)
@@ Ligne 204: / Ligne 203: @@
         });
-    // tslint:disable-next-line:member-ordering
     @Effect() deleteCompany$ = this.actions$
         .ofType(companyActions.DELETE_COMPANY)
@@ Ligne 217: / Ligne 215: @@
 <code>
 @Effect({ dispatch: false })
+</code>
+Lancer une seule requête lors de plusieurs appels d'action ''FETCH'':
+<code javascript>
+@Effect()
+  request$: Observable<Action> = this.actions$.pipe(
+    ofType<Request>(RequestTypes.REQUEST_FETCH),
+    distinct(
+      () => RequestTypes.REQUEST_FETCH,
+      this.actions$.pipe(
+        ofType<Request>(
+          RequestTypes.REQUEST_SUCCESS,
+          RequestTypes.REQUEST_FAILED
+        )
+      )
+    ),
+    mergeMap(action =>
+      this.someService.request(action.data).pipe(
+        map(data => {
 </code>
@@ Ligne 233: / Ligne 251: @@
-====== Dispatching Events ======
+====== Dispatching Actions ======
+Le //lancement// d'actions se fait avec le store.  Dans le constructeur d'un composant ou d'un service, on injecte le Store:
+<code javascript>
+constructor(private store: Store<IProduct[]>) {}
+</code>
+Par la suite, on peut lancer des actions:
+<code javascript>
+this.store.dispatch(new ProductsFetch());
+</code>
@@ Ligne 242: / Ligne 270: @@
 ====== Sélecteurs ======
+L'exemple ci-dessous montre comment créer un sélecteur et aussi comment faire de la composition de sélecteurs.
 <code javascript>
@@ Ligne 260: / Ligne 289: @@
 > = createSelector(
   someRequestSelector,
-  (request: IHttpState) => request && request.success
+  (request: IRequestState) => request && request.success
 );
 </code>
+Le sélecteur ''someRequestSelector'' est repris dans le sélecteur ''requestSuccess'' pour éviter de reprendre tout l'état à partir de ''AppSelectors.appSelector()''.
+  * [[https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8|Parameterized Selectors]]
@@ Ligne 269: / Ligne 302: @@
   * [[https://toddmotto.com/redux-typescript-store|Finally understand Redux by building your own Store]]
   * [[https://github.com/duncanhunter/ngrx-play-by-play|Play-by-play ngrx]]
+  * [[https://blog.angularindepth.com/ngrx-tips-tricks-69feb20a42a7|NgRx: tips & tricks]]