Skip to content

Commit

Permalink
docs: few tweaks to the migration guide (#3649)
Browse files Browse the repository at this point in the history
Closes #3615
  • Loading branch information
timdeschryver authored Nov 6, 2022
1 parent 0eaa536 commit 80b33a2
Showing 1 changed file with 24 additions and 62 deletions.
86 changes: 24 additions & 62 deletions projects/ngrx.io/content/guide/migration/v15.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@ Version 15 has the minimum version requirements:

### @ngrx/store

#### Strict Selector Projector

The projector function on the selector is type-safe by default.
The projector function also has become strict for selectors with props.

BEFORE:

The projector is not type-safe by default, allowing for potential mismatch types in the projector function.
The projector is not type-safe, allowing for potential mismatch types in the projector function.

```ts
const mySelector = createSelector(
Expand All @@ -41,7 +44,7 @@ mySelector.projector() // <- type is projector(...args: any[]): number

AFTER:

The projector is strict by default, but can be bypassed with an `any` generic parameter.
The projector is strict by default, but can be bypassed with an `any` type assertion to specify a less specific type.

```ts
const mySelector = createSelector(
Expand All @@ -65,95 +68,53 @@ const mySelector = createSelector(
(mySelector.projector as any)()
```

The projector method has become strict for selectors with props

BEFORE:

You could pass any arguments to the projector method

```ts
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:

```ts
const selector = createSelector(
selectString, // returning a string
selectNumber, // returning a number
(s, n, prefix: string) => {
return prefix + s.repeat(n);
}
)
### @ngrx/effects

// this throws
selector.projector(1, 'a', true);
// this does not throw because the arguments have the correct type
selector.projector(1, 'a', 'prefix');
```
#### Removal of @Effect

### @ngrx/effects
The `@Effect` decorator is removed in favor of [`createEffect`](api/effects/createEffect).
This change also means that the ESLint rules @ngrx/no-effect-decorator-and-creator and @ngrx/no-effect-decorator are removed.

The @Effect decorator is removed
> A migration was added (in the v13 release) to upgrade existing codebases to the `createEffect` function.
BEFORE:

Defining an effect is done with @Effect
An effect is defined with the `@Effect` decorator.

```ts
@Effect()
data$ = this.actions$.pipe();
```

A migration was added in the v13 release to upgrade existing codebases to the `createEffect` function.

AFTER:

Defining an effect is done with createEffect
You need to define an effect with `createEffect`.

```ts
data$ = createEffect(() => this.actions$.pipe());
```

The signature of `provideEffects` is changed to expect a
spreaded array of effects.
### @ngrx/router-store

BEFORE:
#### Title

`provideEffects` expected the effects to be passed as an array.
BREAKING CHANGE:

```ts
// single effect
provideEffects([MyEffect])
The property `title: string | undefined` is added to the `MinimalActivatedRouteSnapshot` interface when a title added to the route config.

// multiple effects
provideEffects([MyEffect, MySecondEffect])
```ts
BEFORE:

AFTER:
The `MinimalActivatedRouteSnapshot` interface doesn't contain the `title` property.

`provideEffects` expects the effects as a spreaded array as argument.
AFTER:

```ts
// single effect
provideEffects(MyEffect)
The `MinimalActivatedRouteSnapshot` interface contains the required `title` property.

// multiple effects
provideEffects(MyEffect, MySecondEffect)
```
### @ngrx/component

## @ngrx/component
#### Removal of ReactiveComponentModule

`ReactiveComponentModule` is removed in favor of `LetModule` and `PushModule`.
The `ReactiveComponentModule` is removed in favor of [`LetModule`](/api/component/LetModule) and [`PushModule`](/api/component/PushModule).

BEFORE:

Expand Down Expand Up @@ -182,3 +143,4 @@ import { LetModule, PushModule } from '@ngrx/component';
],
})
export class MyFeatureModule {}
```

0 comments on commit 80b33a2

Please sign in to comment.