@ngrx/effects
Advanced tools
Changelog
15.0.0-rc.0 (2022-11-23)
LetDirective
view when replaced observable is in suspense state (#3671) (ec59c4b)LetDirective
view will be cleared when the replaced observable is in a suspense state. Also, the suspense
property is removed from the LetViewContext
because it would always be false
when the LetDirective
view is rendered. Instead of suspense
property, use the suspense template to handle the suspense state.BEFORE:
The LetDirective
view will not be cleared when the replaced observable is in a suspense state and the suspense template is not passed:
@Component({
template: `
<!-- When button is clicked, the 'LetDirective' view won't be cleared. -->
<!-- Instead, the value of 'o' will be 'undefined' until the replaced -->
<!-- observable emits the first value (after 1 second). -->
<p *ngrxLet="obs$ as o">{{ o }}</p>
<button (click)="replaceObs()">Replace Observable</button>
`,
})
export class TestComponent {
obs$ = of(1);
replaceObs(): void {
this.obs$ = of(2).pipe(delay(1000));
}
}
AFTER:
The LetDirective
view will be cleared when the replaced observable is in a suspense state and the suspense template is not passed:
@Component({
template: `
<!-- When button is clicked, the 'LetDirective' view will be cleared. -->
<!-- The view will be created again when the replaced observable -->
<!-- emits the first value (after 1 second). -->
<p *ngrxLet="obs$ as o">{{ o }}</p>
<button (click)="replaceObs()">Replace Observable</button>
`,
})
export class TestComponent {
obs$ = of(1);
replaceObs(): void {
this.obs$ = of(2).pipe(delay(1000));
}
}
$
prefix is removed from LetViewContext
property names.BEFORE:
<ng-container *ngrxLet="obs$; $error as e; $complete as c"> ... </ng-container>
AFTER:
<ng-container *ngrxLet="obs$; error as e; complete as c"> ... </ng-container>
<a name="15.0.0-beta.1"></a>
Changelog
15.0.0-beta.1 (2022-11-18)
title: string | undefined
is added to the MinimalActivatedRouteSnapshot
interface.BEFORE:
The MinimalActivatedRouteSnapshot
interface doesn't contain the title
property.
AFTER:
The MinimalActivatedRouteSnapshot
interface contains the required title
property.
<a name="15.0.0-beta.0"></a>
Changelog
15.0.0-beta.0 (2022-11-03)
select
(#3629) (f8d0241), closes #3632 #3631ReactiveComponentModule
is removed in favor of LetModule
and PushModule
.BEFORE:
import { ReactiveComponentModule } from '@ngrx/component';
@NgModule({
imports: [
// ... other imports
ReactiveComponentModule,
],
})
export class MyFeatureModule {}
AFTER:
import { LetModule, PushModule } from '@ngrx/component';
@NgModule({
imports: [
// ... other imports
LetModule,
PushModule,
],
})
export class MyFeatureModule {}
BEFORE:
You could pass any arguments to the projector method
const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )
// you could pass any argument selector.projector(1, 'a', true);
AFTER:
const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )
// this throws selector.projector(1, 'a', true); // this does not throw because the arguments have the correct type selector.projector(1, 'a', 'prefix');
BEFORE:
The projector is not type-safe by default, allowing for potential mismatch types in the projector function.
const mySelector = createSelector(
() => 'one',
() => 2,
(one, two) => 3
);
mySelector.projector(); // <- type is projector(...args: any[]): number
AFTER:
The projector is strict by default, but can be bypassed with an any
generic parameter.
const mySelector = createSelector(
() => 'one',
() => 2,
(one, two) => 3
);
mySelector.projector(); // <- Results in type error. Type is projector(s1: string, s2: number): number
To retain previous behavior
const mySelector = createSelector(
() => 'one',
() => 2,
(one, two) => 3
)(mySelector.projector as any)();
BEFORE:
Defining an effect is done with @Effect
@Effect() data$ = this.actions$.pipe();
AFTER:
Defining an effect is done with createEffect
data$ = createEffect(() => this.actions$.pipe());
provideEffects
is changed to expect a
spreaded array of effects.BEFORE:
provideEffects
expecteded the effects to be passed as an array.
// single effect
provideEffects([MyEffect]);
// multiple effects
provideEffects([MyEffect, MySecondEffect]);
AFTER:
provideEffects
expects the effects as a spreaded array as argument.
// single effect
provideEffects(MyEffect);
// multiple effects
provideEffects(MyEffect, MySecondEffect);
<a name="14.3.2"></a>
Changelog
14.3.2 (2022-10-04)
<a name="14.3.1"></a>
Changelog
14.3.0 (2022-08-25)
<a name="14.2.0"></a>
Changelog
14.1.0 (2022-08-09)
<a name="14.0.2"></a>
Changelog
14.0.2 (2022-07-12)
<a name="14.0.1"></a>