Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6f8c1f4

Browse files
BioPhotonBioPhoton
authored
* feat(state): add effects sum-module
1 parent 9778db3 commit 6f8c1f4

File tree

28 files changed

+790
-153
lines changed

28 files changed

+790
-153
lines changed

‎apps/demos/src/app/features/experiments/structural-directives/rx-let-poc/rx-query-content.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChangeDetectionStrategy, Component, ContentChild, Directive, Input, OnInit } from '@angular/core';
22
import { Observable } from 'rxjs';
33
import { RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
4-
import { RxEffects } from '../../../../shared/rx-effects.service';
4+
import { RxEffects } from '@rx-angular/state/effects';
55

66
@Directive({
77
selector: '[rxaContentTest]'
@@ -31,7 +31,7 @@ export class RxQueryContentComponent implements OnInit {
3131
}
3232

3333
ngOnInit() {
34-
this.effects.hold(this.value, () => {
34+
this.effects.register(this.value, () => {
3535
setTimeout(() => console.log(this.contentChild), 250);
3636
});
3737
}

‎apps/demos/src/app/features/template/rx-for/nested-lists/rx-for-minimal.directive.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
take,
2929
tap
3030
} from 'rxjs/operators';
31-
import { RxEffects } from '../../../../shared/rx-effects.service';
31+
import { RxEffects } from '@rx-angular/state/effects';
3232

3333
type RxForTemplateNames = 'rxSuspense' | 'rxNext' | 'rxError' | 'rxComplete';
3434

@@ -140,7 +140,7 @@ export class RxMinimalForOf<T extends object, U extends NgIterable<T> = NgIterab
140140

141141
initDiffer(iterable: U = [] as U) {
142142
this.differ = this.iterableDiffers.find(iterable).create((index: number, item: T) => item[this._rxTrackBy]);
143-
this.rxEffects.hold(this.values$.pipe(
143+
this.rxEffects.register(this.values$.pipe(
144144
startWith(iterable),
145145
map(i => ({ diff: this.differ.diff(i), iterable: i })),
146146
filter(r => r.diff != null),
@@ -149,7 +149,7 @@ export class RxMinimalForOf<T extends object, U extends NgIterable<T> = NgIterab
149149
}
150150

151151
ngOnInit() {
152-
this.rxEffects.hold(this.values$.pipe(take(1)), (value) => this.initDiffer(value));
152+
this.rxEffects.register(this.values$.pipe(take(1)), (value) => this.initDiffer(value));
153153
}
154154

155155
ngOnDestroy() {

‎apps/demos/src/app/features/template/rx-let/lazy-loading-components/lazy-loading-components-promise.component.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
2-
import { from, Subject } from 'rxjs';
3-
import { delay, scan, shareReplay, switchMap } from 'rxjs/operators';
4-
import { RxEffects } from '../../../../shared/rx-effects.service';
5-
import { CdHelper } from '../../../../shared/utils/cd-helper';
2+
import { from } from 'rxjs';
63

74
@Component({
85
selector: 'rxa-lazy-loading-components-promise',

‎apps/demos/src/app/features/template/rx-let/lazy-loading-components/lazy-loading-components.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RxEffects } from '../../../../shared/rx-effects.service';
2+
import { RxEffects } from '@rx-angular/state/effects';
33

44
@Component({
55
selector: 'rxa-lazy-loading-components',
@@ -33,7 +33,7 @@ import { RxEffects } from '../../../../shared/rx-effects.service';
3333
`,
3434
changeDetection: ChangeDetectionStrategy.OnPush
3535
})
36-
export class LazyLoadingComponentsComponent extends RxEffects {
36+
export class LazyLoadingComponentsComponent {
3737

3838
displayStates = {
3939
none: 0,

‎apps/demos/src/app/features/template/rx-let/ng-if-hack/ng-if-hack.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RxEffects } from '../../../../shared/rx-effects.service';
2+
import { RxEffects } from '@rx-angular/state/effects';
33

44
@Component({
55
selector: 'rxa-ngif-hack-container',
@@ -38,7 +38,7 @@ import { RxEffects } from '../../../../shared/rx-effects.service';
3838
`,
3939
changeDetection: ChangeDetectionStrategy.OnPush
4040
})
41-
export class NgIfHackComponent extends RxEffects {
41+
export class NgIfHackComponent {
4242
isVisible= true
4343

4444
displayStates = {

‎apps/demos/src/app/features/template/strategies/pixel-priority/pixel-priority.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
33
import { map } from 'rxjs/operators';
44
import { createImageConverter } from '../../../../shared/image-array';
55
import { computeColorPrio } from '../../../../shared/image-array/pixel-image';
6-
import { RxEffects } from '../../../../shared/rx-effects.service';
6+
import { RxEffects } from '@rx-angular/state/effects';
77

88
@Component({
99
selector: 'rxa-concurrent-strategies',
@@ -67,7 +67,7 @@ export class PixelPriorityComponent {
6767
pixelArray$ = this.imgInfoChange$.pipe(map(d => d.pixelArray));
6868

6969
constructor(public rxEf: RxEffects) {
70-
this.rxEf.hold(this.imgChange$, (img: CanvasImageSource) => this.imgConverter.renderImage(img));
70+
this.rxEf.register(this.imgChange$, (img: CanvasImageSource) => this.imgConverter.renderImage(img));
7171
}
7272

7373
visible(choice) {

‎apps/demos/src/app/features/tutorials/basics/1-setup/Readme.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ The next step is to set up `model$`, a component property that holds all data we
5858
By assigning the `model$` to the `$` property of the `RxState` class, we get the full state object as `Observable<ComponentState>`.
5959

6060
```typescript
61-
6261
@Component({
6362
selector: 'rxa-setup-solution',
6463
template: `

‎apps/demos/src/app/features/tutorials/basics/5-side-effects/Readme.md

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,36 @@ export class SideEffectsStart
125125

126126
This is the trigger for our side effect.
127127

128-
## `hold` the side effect
128+
## Manage side effects
129129

130-
From the `resetRefreshTick` method, we now move the logic that starts the tick and place it in the `hold` method as a callback parameter.
130+
To maintain side effects RxAngular provides a deprecated method `RxState#hold`.
131+
As this method will get removed in the future we directly focus on the new method and use `RxEffects#register`.
131132

132-
The `hold` method's job, as the name implies, is to *hold* something. Namely, it holds a subscription to a side effect and takes care of its initialization.
133+
`RxEffects` is used in the same way as `RxState` as "component only provider". This means we need to add it to the components `providers` array.
134+
135+
136+
```typescript
137+
@Component({
138+
...
139+
providers: [
140+
RxEffects
141+
]
142+
})
143+
export class SideEffectsStart extends RxState<ComponentState> {
144+
constructor(private rxEffects: RxEffects) {
145+
146+
}
147+
}
148+
```
149+
150+
From the `resetRefreshTick` method, we now move the logic that starts the tick and place it in the `register` method of `RxEffects` as a callback parameter.
151+
152+
The `register` method's job, as the name implies, is to *registers/holds* something. Namely, it holds a subscription to a side effect and takes care of its initialization.
133153
Furthermore, it automatically handles the subscription management and unsubscribes if the component gets destroyed.
134154

135155
```typescript
136156
constructor(...) {
137-
this.hold(this.refreshClicks$, () => this.listService.refetchList());
157+
this.rxEffects.register(this.refreshClicks$, () => this.listService.refetchList());
138158
}
139159
```
140160

@@ -148,11 +168,11 @@ refreshListSideEffect$ = this.refreshClicks$.pipe(
148168
);
149169
```
150170

151-
and then hold it directly:
171+
and then register it directly:
152172

153173
```typescript
154174
constructor(...) {
155-
this.hold(refreshListSideEffect$);
175+
this.rxEffects.register(refreshListSideEffect$);
156176
}
157177
```
158178

@@ -186,19 +206,19 @@ refreshListSideEffect$ = merge(
186206
).pipe(tap((_) => this.listService.refetchList()));
187207
```
188208

189-
As a last step, we could use another overload of the `hold` method to get better readability of the code.
209+
As a last step, we could use another overload of the `register` method to get better readability of the code.
190210

191-
The second overload of the `hold` method takes a trigger `Observable` and a separate function that is executed whenever the trigger fires.
211+
The second overload of the `register` method takes a trigger `Observable` and a separate function that is executed whenever the trigger fires.
192212
It generally looks like this:
193213

194-
`hold(o$: Observable<T>, sideEffect: (v: T) => void)`
214+
`register(o$: Observable<T>, sideEffect: (v: T) => void)`
195215

196216
In our constructor, we can use it as following:
197217

198218
```typescript
199219
constructor(...) {
200220
// ...
201-
this.hold(refreshListSideEffect$, () => this.listService.refetchList());
221+
this.rxEffects.register(refreshListSideEffect$, () => this.listService.refetchList());
202222
}
203223
```
204224

‎apps/demos/src/app/rx-angular-pocs/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export * from './cdk';
22
export * from './template';
3-
export *from './state';
43

‎apps/demos/src/app/rx-angular-pocs/state/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)