Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: few tweaks to the migration guide #3649

Merged
merged 2 commits into from
Nov 6, 2022
Merged

docs: few tweaks to the migration guide #3649

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f358fb6
docs: few tweaks to the migration guide
timdeschryver Nov 5, 2022
fd74f51
Apply suggestions from code review
timdeschryver Nov 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 24 additions & 62 deletions projects/ngrx.io/content/guide/migration/v15.md
View file
Open in desktop
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.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the description because we didn't implement the any type generic


```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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Introduced in #3648


`provideEffects` expected the effects to be passed as an array.
timdeschryver marked this conversation as resolved.
Show resolved Hide resolved
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 {}
```