Différences

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

--- web:javascript:angular:ngrx [2018/04/22 03:12] – [Effects] sgariepy
+++ web:javascript:angular:ngrx [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 17: / Ligne 17: @@
+====== Composition de l'état par module ======
+Dans AppModule, on utilise ''StoreModule.forRoot()'':
+<code javascript>
+import { StoreModule } from '@ngrx/store';
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot(appRoutes),
+    ...
+    StoreModule.forRoot(reducer),
+  ],
+  declarations: [...],
+  bootstrap: [ AppComponent ]
+});
+export class AppModule {}
+</code>
+Dans un module **feature**, on utilise ''StoreModule.forFeature()'':
+<code javascript>
+import { StoreModule } from '@ngrx/store';
+@NgModule({
+  imports: [
+    SharedModule,
+    RouterModule.forChild(productRoutes),
+    ...
+    StoreModule.forFeature('products', reducer),
+  ],
+  declarations: [...],
+  providers: [ ... ]
+});
+export class ProductModule {}
+</code>
 ====== Actions ======
@@ Ligne 157: / Ligne 196: @@
     ) { }
-    // tslint:disable-next-line:member-ordering
     @Effect() loadCompanies$ = this.actions$
         .ofType(companyActions.LOAD_COMPANIES)
@@ Ligne 165: / Ligne 203: @@
         });
-    // tslint:disable-next-line:member-ordering
     @Effect() deleteCompany$ = this.actions$
         .ofType(companyActions.DELETE_COMPANY)
@@ Ligne 174: / Ligne 211: @@
 };
 </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>
+====== Change detection Strategies ======
+<code javascript>
+@Component({
+  selector: 'app-company-list',
+  templateUrl: './company-list.component.html',
+  styleUrls: ['./company-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+</code>
+====== 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 180: / 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]]