web:javascript:angular:ngrx
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
web:javascript:angular:ngrx [2018/04/22 03:17] – [Effects] sgariepy | web:javascript:angular:ngrx [2018/12/21 20:10] – [Effects] sgariepy | ||
---|---|---|---|
Ligne 17: | Ligne 17: | ||
+ | ====== Composition de l' | ||
+ | |||
+ | Dans AppModule, on utilise '' | ||
+ | |||
+ | <code javascript> | ||
+ | import { StoreModule } from ' | ||
+ | |||
+ | @NgModule({ | ||
+ | imports: [ | ||
+ | BrowserModule, | ||
+ | RouterModule.forRoot(appRoutes), | ||
+ | ... | ||
+ | StoreModule.forRoot(reducer), | ||
+ | ], | ||
+ | declarations: | ||
+ | bootstrap: [ AppComponent ] | ||
+ | }); | ||
+ | |||
+ | export class AppModule {} | ||
+ | </ | ||
+ | |||
+ | Dans un module **feature**, | ||
+ | |||
+ | <code javascript> | ||
+ | import { StoreModule } from ' | ||
+ | |||
+ | @NgModule({ | ||
+ | imports: [ | ||
+ | SharedModule, | ||
+ | RouterModule.forChild(productRoutes), | ||
+ | ... | ||
+ | StoreModule.forFeature(' | ||
+ | ], | ||
+ | declarations: | ||
+ | providers: [ ... ] | ||
+ | }); | ||
+ | |||
+ | export class ProductModule {} | ||
+ | </ | ||
====== Actions ====== | ====== Actions ====== | ||
Ligne 157: | Ligne 196: | ||
) { } | ) { } | ||
- | // tslint: | ||
@Effect() loadCompanies$ = this.actions$ | @Effect() loadCompanies$ = this.actions$ | ||
.ofType(companyActions.LOAD_COMPANIES) | .ofType(companyActions.LOAD_COMPANIES) | ||
Ligne 165: | Ligne 203: | ||
}); | }); | ||
- | // tslint: | ||
@Effect() deleteCompany$ = this.actions$ | @Effect() deleteCompany$ = this.actions$ | ||
.ofType(companyActions.DELETE_COMPANY) | .ofType(companyActions.DELETE_COMPANY) | ||
Ligne 173: | Ligne 210: | ||
}); | }); | ||
}; | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | < | ||
+ | @Effect({ dispatch: false }) | ||
+ | </ | ||
+ | |||
+ | Lancer une seule requête lors de plusieurs appels d' | ||
+ | |||
+ | <code javascript> | ||
+ | @Effect() | ||
+ | request$: Observable< | ||
+ | ofType< | ||
+ | distinct( | ||
+ | () => RequestTypes.REQUEST_FETCH, | ||
+ | this.actions$.pipe( | ||
+ | ofType< | ||
+ | RequestTypes.REQUEST_SUCCESS, | ||
+ | RequestTypes.REQUEST_FAILED | ||
+ | ) | ||
+ | ) | ||
+ | ), | ||
+ | mergeMap(action => | ||
+ | this.someService.request(action.data).pipe( | ||
+ | map(data => { | ||
</ | </ | ||
Ligne 179: | Ligne 241: | ||
- | | + | <code javascript> |
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | | ||
+ | }) | ||
+ | </ | ||
+ | ====== Dispatching Actions ====== | ||
+ | Le // | ||
+ | |||
+ | <code javascript> | ||
+ | constructor(private store: Store< | ||
+ | </ | ||
+ | |||
+ | Par la suite, on peut lancer des actions: | ||
+ | |||
+ | <code javascript> | ||
+ | this.store.dispatch(new ProductsFetch()); | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====== Sélecteurs ====== | ||
+ | |||
+ | L' | ||
+ | |||
+ | <code javascript> | ||
+ | interface IRequestState { | ||
+ | pending: boolean; | ||
+ | success: boolean; | ||
+ | error: any; | ||
+ | } | ||
+ | |||
+ | export const someRequestSelector: | ||
+ | AppSelectors.appSelector(), | ||
+ | (state: any) => state && state.someRequest | ||
+ | ); | ||
+ | |||
+ | export const requestSuccess: | ||
+ | IHttpState, | ||
+ | boolean | ||
+ | > = createSelector( | ||
+ | someRequestSelector, | ||
+ | (request: IRequestState) => request && request.success | ||
+ | ); | ||
+ | </ | ||
+ | Le sélecteur '' | ||
====== Sources ====== | ====== Sources ====== | ||
Ligne 189: | Ligne 299: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// |
web/javascript/angular/ngrx.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1