Différences

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

--- web:javascript:angular:ngrx [2018/10/06 17:42] – [Composition de l'état par module] 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 212: / Ligne 210: @@
         });
 };
+</code>
+<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 228: / 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>
+====== 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>
+interface IRequestState {
+  pending: boolean;
+  success: boolean;
+  error: any;
+}
+export const someRequestSelector: MemoizedSelector<any, IHttpState> = createSelector(
+  AppSelectors.appSelector(),
+  (state: any) => state && state.someRequest
+);
+export const requestSuccess: MemoizedSelector<
+  IHttpState,
+  boolean
+> = createSelector(
+  someRequestSelector,
+  (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 238: / 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]]