Skip to content

Commit 31721c9

Browse files
kmathyPROkmathyPRO
committed
feat(): use pipe with Rxjs
1 parent b47fd45 commit 31721c9

File tree

5 files changed

+94
-67
lines changed

5 files changed

+94
-67
lines changed

‎templates/Basic/_effect.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Injectable } from '@angular/core';
22
import { Actions, Effect } from '@ngrx/effects';
33
import { Observable } from 'rxjs/Observable';
4-
import { of as observableOf } from 'rxjs/observabe/of';
4+
import { of as observableOf } from 'rxjs/observable/of';
55
import { switchMap } from 'rxjs/operators/switchMap';
66
import { map } from 'rxjs/operators/map';
7-
import { catch } from 'rxjs/operators/catch';
7+
import { catchError } from 'rxjs/operators/catchError';
88
import { {{properCase name }}Service } from '{{position "services"}}/{{ kebabCase name }}.service';
99
import * as {{ camelCase name }}Actions from '{{position "actions"}}/{{ kebabCase name }}.actions';
1010

@@ -18,11 +18,14 @@ export class {{ properCase name }}Effects {
1818
) {
1919
this.load{{ titleCase name }}$ = this.actions$
2020
.ofType({{ camelCase name }}Actions.LOAD_{{ constantCase name }})
21-
.switchMap((state: {{ camelCase name }}Actions.Load{{ titleCase name }}Action) => this.{{ camelCase name }}Service.load{{ titleCase name }}()
22-
// If successful, dispatch success action with result
23-
.map(res => new {{ camelCase name }}Actions.Load{{ titleCase name }}SuccessAction(res))
24-
// If request fails, dispatch failed action
25-
.catch((err: Error) => observableOf(new {{ camelCase name }}Actions.Load{{ titleCase name }}FailAction(err)))
21+
.pipe(switchMap((state: {{ camelCase name }}Actions.Load{{ titleCase name }}Action) =>
22+
this.{{ camelCase name }}Service.load{{ titleCase name }}().pipe(
23+
// If successful, dispatch success action with result
24+
map(res => new {{ camelCase name }}Actions.Load{{ titleCase name }}SuccessAction(res)),
25+
// If request fails, dispatch failed action
26+
catchError((err: Error) => observableOf(new {{ camelCase name }}Actions.Load{{ titleCase name }}FailAction(err)))
27+
)
28+
)
2629
);
2730
}
2831

‎templates/Basic/_reducer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ export function reducer(state = initialState, action: {{ camelCase name }}.Actio
2828
}
2929

3030
case {{ camelCase name }}.LOAD_{{ constantCase name }}_SUCCESS: {
31-
state.result = action.payload;
3231
return {
3332
...state,
33+
result: action.payload,
3434
loading: false,
3535
error: null,
3636
type: action.type

‎templates/CRUD-entity/_effect.ts‎

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Injectable } from '@angular/core';
22
import { Actions, Effect } from '@ngrx/effects';
33
import { Observable } from 'rxjs/Observable';
4-
import { of as observableOf } from 'rxjs/observabe/of';
4+
import { of as observableOf } from 'rxjs/observable/of';
55
import { switchMap } from 'rxjs/operators/switchMap';
66
import { map } from 'rxjs/operators/map';
7-
import { catch } from 'rxjs/operators/catch';
7+
import { catchError } from 'rxjs/operators/catchError';
88
import { HttpErrorResponse } from '@angular/common/http';
99
import { {{properCase name }}Service } from '{{position "services"}}/{{ kebabCase name }}.service';
1010
import * as {{ camelCase name }}Actions from '{{position "actions"}}/{{ kebabCase name }}.actions';
@@ -26,61 +26,77 @@ export class {{ properCase name }}Effects {
2626
) {
2727
this.load{{ titleCase name }}s$ = this.actions$
2828
.ofType({{ camelCase name }}Actions.LOAD_{{ constantCase name }}S)
29-
.switchMap((state: {{ camelCase name }}Actions.Load{{ titleCase name }}sAction) => this.{{ camelCase name }}Service.load{{ titleCase name }}s()
30-
// If successful, dispatch success action with result
31-
.map(res => new {{ camelCase name }}Actions.Load{{ titleCase name }}sSuccessAction(res))
32-
// If request fails, dispatch failed action
33-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Load{{ titleCase name }}sFailAction(err)))
34-
);
29+
.pipe(switchMap((state: {{ camelCase name }}Actions.Load{{ titleCase name }}sAction) =>
30+
this.{{ camelCase name }}Service.load{{ titleCase name }}s().pipe(
31+
// If successful, dispatch success action with result
32+
map(res => new {{ camelCase name }}Actions.Load{{ titleCase name }}sSuccessAction(res)),
33+
// If request fails, dispatch failed action
34+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Load{{ titleCase name }}sFailAction(err)))
35+
)
36+
));
3537

3638
this.add{{ titleCase name }}$ = this.actions$
3739
.ofType({{ camelCase name }}Actions.ADD_{{ constantCase name }})
38-
.switchMap((state: {{ camelCase name }}Actions.Add{{ titleCase name }}Action) => this.{{ camelCase name}}Service.add{{ titleCase name }}(state.payload)
39-
.map(res => new {{ camelCase name }}Actions.Add{{ titleCase name }}SuccessAction(res))
40-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Add{{ titleCase name }}FailAction(err)))
41-
);
40+
.pipe(switchMap((state: {{ camelCase name }}Actions.Add{{ titleCase name }}Action) =>
41+
this.{{ camelCase name}}Service.add{{ titleCase name }}(state.payload).pipe(
42+
map(res => new {{ camelCase name }}Actions.Add{{ titleCase name }}SuccessAction(res)),
43+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Add{{ titleCase name }}FailAction(err)))
44+
)
45+
));
4246

4347
this.add{{ titleCase name }}s$ = this.actions$
4448
.ofType({{ camelCase name }}Actions.ADD_{{ constantCase name }}S)
45-
.switchMap((state: {{ camelCase name }}Actions.Add{{ titleCase name }}sAction) => this.{{ camelCase name}}Service.add{{ titleCase name }}s(state.payload)
46-
.map(res => new {{ camelCase name }}Actions.Add{{ titleCase name }}sSuccessAction(res))
47-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Add{{ titleCase name }}sFailAction(err)))
48-
);
49+
.pipe(switchMap((state: {{ camelCase name }}Actions.Add{{ titleCase name }}sAction) =>
50+
this.{{ camelCase name}}Service.add{{ titleCase name }}s(state.payload).pipe(
51+
map(res => new {{ camelCase name }}Actions.Add{{ titleCase name }}sSuccessAction(res)),
52+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Add{{ titleCase name }}sFailAction(err)))
53+
)
54+
));
4955

5056
this.update{{ titleCase name }}$ = this.actions$
5157
.ofType({{ camelCase name }}Actions.UPDATE_{{ constantCase name }})
52-
.switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}Action) => this.{{ camelCase name }}Service.update{{ titleCase name }}(state.payload)
53-
.map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}SuccessAction(res))
54-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Update{{ titleCase name }}FailAction(err)))
55-
);
58+
.pipe(switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}Action) =>
59+
this.{{ camelCase name }}Service.update{{ titleCase name }}(state.payload).pipe(
60+
map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}SuccessAction(res)),
61+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Update{{ titleCase name }}FailAction(err)))
62+
)
63+
));
5664

5765
this.update{{ titleCase name }}s$ = this.actions$
5866
.ofType({{ camelCase name }}Actions.UPDATE_{{ constantCase name }}S)
59-
.switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}sAction) => this.{{ camelCase name }}Service.update{{ titleCase name }}s(state.payload)
60-
.map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}sSuccessAction(res))
61-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Update{{ titleCase name }}sFailAction(err)))
62-
);
67+
.pipe(switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}sAction) =>
68+
this.{{ camelCase name }}Service.update{{ titleCase name }}s(state.payload).pipe(
69+
map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}sSuccessAction(res)),
70+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Update{{ titleCase name }}sFailAction(err)))
71+
)
72+
));
6373

6474
this.delete{{ titleCase name }}$ = this.actions$
6575
.ofType({{ camelCase name }}Actions.DELETE_{{ constantCase name }})
66-
.switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}Action) => this.{{ camelCase name }}Service.delete{{ titleCase name }}(state.payload)
67-
.map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}SuccessAction(res))
68-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Delete{{ titleCase name }}FailAction(err)))
69-
);
76+
.pipe(switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}Action) =>
77+
this.{{ camelCase name }}Service.delete{{ titleCase name }}(state.payload).pipe(
78+
map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}SuccessAction(res)),
79+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Delete{{ titleCase name }}FailAction(err)))
80+
)
81+
));
7082

7183
this.delete{{ titleCase name }}s$ = this.actions$
7284
.ofType({{ camelCase name }}Actions.DELETE_{{ constantCase name }}S)
73-
.switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}sAction) => this.{{ camelCase name }}Service.delete{{ titleCase name }}s(state.payload)
74-
.map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}sSuccessAction(res))
75-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Delete{{ titleCase name }}sFailAction(err)))
76-
);
85+
.pipe(switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}sAction) =>
86+
this.{{ camelCase name }}Service.delete{{ titleCase name }}s(state.payload).pipe(
87+
map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}sSuccessAction(res)),
88+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Delete{{ titleCase name }}sFailAction(err)))
89+
)
90+
));
7791

7892
this.clear{{ titleCase name }}s$ = this.actions$
7993
.ofType({{ camelCase name }}Actions.CLEAR_{{ constantCase name }}S)
80-
.switchMap((state: {{ camelCase name }}Actions.Clear{{ titleCase name }}sAction) => this.{{ camelCase name }}Service.clear{{ titleCase name }}s(state.payload)
81-
.map(res => new {{ camelCase name }}Actions.Clear{{ titleCase name }}sSuccessAction(res))
82-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Clear{{ titleCase name }}sFailAction(err)))
83-
);
94+
.pipe(switchMap((state: {{ camelCase name }}Actions.Clear{{ titleCase name }}sAction) =>
95+
this.{{ camelCase name }}Service.clear{{ titleCase name }}s(state.payload).pipe(
96+
map(res => new {{ camelCase name }}Actions.Clear{{ titleCase name }}sSuccessAction(res)),
97+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Clear{{ titleCase name }}sFailAction(err)))
98+
)
99+
));
84100
}
85101

86102
}

‎templates/CRUD/_effect.ts‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Injectable } from '@angular/core';
22
import { Actions, Effect } from '@ngrx/effects';
33
import { Observable } from 'rxjs/Observable';
4-
import { of as observableOf } from 'rxjs/observabe/of';
4+
import { of as observableOf } from 'rxjs/observable/of';
55
import { switchMap } from 'rxjs/operators/switchMap';
66
import { map } from 'rxjs/operators/map';
7-
import { catch } from 'rxjs/operators/catch';
7+
import { catchError } from 'rxjs/operators/catchError';
88
import { HttpErrorResponse } from '@angular/common/http';
99
import { {{properCase name }}Service } from '{{position "services"}}/{{ kebabCase name }}.service';
1010
import * as {{ camelCase name }}Actions from '{{position "actions"}}/{{ kebabCase name }}.actions';
@@ -22,33 +22,41 @@ export class {{ properCase name }}Effects {
2222
) {
2323
this.get$ = this.actions$
2424
.ofType({{ camelCase name }}Actions.GET_{{ constantCase name }})
25-
.switchMap((state: {{ camelCase name }}Actions.Get{{ titleCase name }}Action) => this.{{ camelCase name }}Service.get{{ titleCase name }}()
26-
// If successful, dispatch success action with result
27-
.map(res => new {{ camelCase name }}Actions.Get{{ titleCase name }}SuccessAction(res))
28-
// If request fails, dispatch failed action
29-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Get{{ titleCase name }}FailAction(err)))
30-
);
25+
.pipe(switchMap((state: {{ camelCase name }}Actions.Get{{ titleCase name }}Action) =>
26+
this.{{ camelCase name }}Service.get{{ titleCase name }}().pipe(
27+
// If successful, dispatch success action with result
28+
map(res => new {{ camelCase name }}Actions.Get{{ titleCase name }}SuccessAction(res)),
29+
// If request fails, dispatch failed action
30+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Get{{ titleCase name }}FailAction(err)))
31+
)
32+
));
3133

3234
this.create$ = this.actions$
3335
.ofType({{ camelCase name }}Actions.CREATE_{{ constantCase name }})
34-
.switchMap((state: {{ camelCase name }}Actions.Create{{ titleCase name }}Action) => this.{{ camelCase name}}Service.create{{ titleCase name }}(state.payload)
35-
.map(res => new {{ camelCase name }}Actions.Create{{ titleCase name }}SuccessAction(res))
36-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Create{{ titleCase name }}FailAction(err)))
37-
);
36+
.pipe(switchMap((state: {{ camelCase name }}Actions.Create{{ titleCase name }}Action) =>
37+
this.{{ camelCase name}}Service.create{{ titleCase name }}(state.payload).pipe(
38+
map(res => new {{ camelCase name }}Actions.Create{{ titleCase name }}SuccessAction(res)),
39+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Create{{ titleCase name }}FailAction(err)))
40+
)
41+
));
3842

3943
this.update$ = this.actions$
4044
.ofType({{ camelCase name }}Actions.UPDATE_{{ constantCase name }})
41-
.switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}Action) => this.{{ camelCase name }}Service.update{{ titleCase name }}(state.payload)
42-
.map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}SuccessAction(res))
43-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Update{{ titleCase name }}FailAction(err)))
44-
);
45+
.pipe(switchMap((state: {{ camelCase name }}Actions.Update{{ titleCase name }}Action) =>
46+
this.{{ camelCase name }}Service.update{{ titleCase name }}(state.payload).pipe(
47+
map(res => new {{ camelCase name }}Actions.Update{{ titleCase name }}SuccessAction(res)),
48+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Update{{ titleCase name }}FailAction(err)))
49+
)
50+
));
4551

4652
this.delete$ = this.actions$
4753
.ofType({{ camelCase name }}Actions.DELETE_{{ constantCase name }})
48-
.switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}Action) => this.{{ camelCase name }}Service.delete{{ titleCase name }}(state.payload)
49-
.map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}SuccessAction(res))
50-
.catch((err: HttpErrorResponse) => Observable.of(new {{ camelCase name }}Actions.Delete{{ titleCase name }}FailAction(err)))
51-
);
54+
.pipe(switchMap((state: {{ camelCase name }}Actions.Delete{{ titleCase name }}Action) =>
55+
this.{{ camelCase name }}Service.delete{{ titleCase name }}(state.payload).pipe(
56+
map(res => new {{ camelCase name }}Actions.Delete{{ titleCase name }}SuccessAction(res)),
57+
catchError((err: HttpErrorResponse) => observableOf(new {{ camelCase name }}Actions.Delete{{ titleCase name }}FailAction(err)))
58+
)
59+
));
5260
}
5361

5462
}

‎templates/CRUD/_reducer.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ export function reducer(state = initialState, action: {{ camelCase name }}.Actio
2929
}
3030

3131
case {{ camelCase name }}.GET_{{ constantCase name }}_SUCCESS: {
32-
state.result = action.payload;
3332
return {
3433
...state,
34+
result: action.payload,
3535
loading: false,
3636
error: null,
3737
type: action.type
@@ -57,9 +57,10 @@ export function reducer(state = initialState, action: {{ camelCase name }}.Actio
5757
}
5858

5959
case {{ camelCase name }}.CREATE_{{ constantCase name }}_SUCCESS: {
60-
state.result = [...state.result, action.payload];
60+
const result = [...state.result, action.payload];
6161
return {
6262
...state,
63+
result: result,
6364
loading: false,
6465
error: null,
6566
type: action.type
@@ -112,7 +113,6 @@ export function reducer(state = initialState, action: {{ camelCase name }}.Actio
112113
}
113114

114115
case {{ camelCase name }}.DELETE_{{ constantCase name }}_SUCCESS: {
115-
state.result.splice(state.result.findIndex(action.payload), 1);
116116
return {
117117
...state,
118118
loading: false,

0 commit comments

Comments
 (0)