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.

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

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎apps/demos/src/app/rx-angular-pocs/state/rx-effects/until-destroy.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/demos/src/app/rx-angular-pocs/template/directives/if-visible/if-visible.directive.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Subscription } from 'rxjs';
1+
import { Subscription, takeUntil } from 'rxjs';
22
import { filter, mergeAll } from 'rxjs/operators';
33
import {
44
ChangeDetectorRef,
@@ -26,7 +26,7 @@ import {
2626
rxIfVisibleTemplateNames,
2727
RxIfVisibleViewContext,
2828
} from './model';
29-
import { RxEffects } from '../../../state/rx-effects';
29+
import { RxEffects } from '@rx-angular/state/effects';
3030

3131
@Directive({
3232
selector: '[ifVisible]',
@@ -99,7 +99,7 @@ export class IfVisibleDirective<U> extends Hooks implements OnInit {
9999
.render(
100100
this.observer.entries$.pipe(
101101
filter((entry) => entry.isIntersecting && !this.displayed),
102-
this.rxEf.untilDestroy()
102+
takeUntil(this.onDestroy$)
103103
)
104104
)
105105
.subscribe(() => {

‎apps/demos/src/app/shared/debug-helper/dirty-checks/dirty-checks-work.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { MatRipple } from '@angular/material/core';
99
import { Hooks } from '../hooks';
1010
import { select } from '@rx-angular/state/selections';
11-
import { RxEffects } from '../../rx-effects.service';
11+
import { RxEffects } from '@rx-angular/state/effects';
1212
import { AppConfigService } from '../../../app-config.service';
1313

1414
@Component({
@@ -65,10 +65,10 @@ export class DirtyChecksWorkComponent extends Hooks {
6565
private rxEf: RxEffects
6666
) {
6767
super();
68-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
68+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
6969
this.rippleOn = r;
7070
});
71-
this.rxEf.hold(this.afterViewInit$, () => {
71+
this.rxEf.register(this.afterViewInit$, () => {
7272
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
7373
this.numDirtyChecks();
7474
});

‎apps/demos/src/app/shared/debug-helper/dirty-checks/dirty-checks.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { MatRipple } from '@angular/material/core';
99
import { Hooks } from '../hooks';
1010
import { select } from '@rx-angular/state/selections';
11-
import { RxEffects } from '../../rx-effects.service';
11+
import { RxEffects } from '@rx-angular/state/effects';
1212
import { AppConfigService } from '../../../app-config.service';
1313

1414
@Component({
@@ -58,10 +58,10 @@ export class DirtyChecksComponent extends Hooks {
5858
private rxEf: RxEffects
5959
) {
6060
super();
61-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
61+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
6262
this.rippleOn = r;
6363
});
64-
this.rxEf.hold(this.afterViewInit$, () => {
64+
this.rxEf.register(this.afterViewInit$, () => {
6565
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
6666
this.numDirtyChecks();
6767
});

‎apps/demos/src/app/shared/debug-helper/renderings/renderings.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
tap,
2121
} from 'rxjs/operators';
2222
import { Hooks } from '../hooks';
23-
import { RxEffects } from '../../rx-effects.service';
23+
import { RxEffects } from '@rx-angular/state/effects';
2424
import { select } from '@rx-angular/state/selections';
2525
import { AppConfigService } from '../../../app-config.service';
2626

@@ -88,11 +88,11 @@ export class RenderingsComponent extends Hooks {
8888
private rxEf: RxEffects
8989
) {
9090
super();
91-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
91+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
9292
this.rippleOn = r;
9393
});
9494

95-
this.rxEf.hold(this.afterViewInit$, () => {
95+
this.rxEf.register(this.afterViewInit$, () => {
9696
this.launchRipple();
9797
});
9898
}

‎apps/demos/src/app/shared/image-array/controls/image-array.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AfterViewInit, Component, ElementRef, Output, ViewChild } from '@angular/core';
22
import { Observable, Subject } from 'rxjs';
3-
import { RxEffects } from '../../rx-effects.service';
3+
import { RxEffects } from '@rx-angular/state/effects';
44
import { Hooks } from '../../debug-helper/hooks';
55
import { RxState } from '@rx-angular/state';
66
import { fileReaderFromBlob, imageFromFileReader } from '../pixel-image';

‎libs/cdk/coalescing/docs/Readme.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ There are 2 places in Angular we have coalescing already implemented in the fram
3030
- The flag `ngZoneEventCoalescing` in `BootstrapOptions`
3131
- RxAngular adds another option where we can apply those techniques manually wherever we want.
3232

33-
**The Benefits of RxAngular**
34-
33+
**The Benefits**
3534
- ✅ Coalescing techniques as RxJS operators
3635
- ✅ Configurable durationSelector for all kind of scheduling methods
3736
- ✅ Scope coalescing to a specific component or object

‎libs/state/effects/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# @rx-angular/state/effects
2+
3+
[![npm](https://img.shields.io/npm/v/%40rx-angular%2Fstate.svg)](https://www.npmjs.com/package/%40rx-angular%2Fstate)
4+
![rx-angular CI](https://github.com/rx-angular/rx-angular/workflows/rx-angular%20CI/badge.svg?branch=master)
5+
[![Coverage Status](https://raw.githubusercontent.com/rx-angular/rx-angular/github-pages/docs/test-coverage/state/jest-coverage-badge.svg)](https://rx-angular.github.io/rx-angular/test-coverage/state/lcov-report/index.html)
6+
7+
## A small typed convenience helper to handle side effects and Observable subscriptions.
8+
9+
`@rx-angular/state/effects` is a small set of helpers designed to handle effects.
10+
11+
## Key features
12+
13+
- ✅ No boiler plate
14+
- ✅ Easy to test
15+
- ✅ Clean separation of concerns
16+
- ✅ Slim and handy APIs
17+
- ✅ Auto-cleanup on destroy
18+
- ✅ Effect interoperability
19+
- ✅ Handlers for imperative code styles
20+
21+
## Demos:
22+
23+
- [⚡ GitHub](https://github.com/BioPhoton/rx-angular-state-effects)
24+
25+
26+
## Install
27+
28+
```bash
29+
npm install --save @rx-angular/state
30+
# or
31+
yarn add @rx-angular/state
32+
```
33+
34+
## Update
35+
36+
If you are using `@rx-angular/state` already, please consider upgrading with the `@angular/cli update` command in order
37+
to make sure all provided code migrations are processed properly.
38+
39+
```bash
40+
ng update @rx-angular/state
41+
# or with nx
42+
nx migrate @rx-angular/state
43+
```
44+
45+
## Documentation
46+
47+
- [RxEffects]()
48+

0 commit comments

Comments
 (0)