diff --git a/projects/ngrx.io/content/guide/migration/v16.md b/projects/ngrx.io/content/guide/migration/v16.md index bc6a4e0c8d..8d9a35103f 100644 --- a/projects/ngrx.io/content/guide/migration/v16.md +++ b/projects/ngrx.io/content/guide/migration/v16.md @@ -21,6 +21,166 @@ Version 16 has the minimum version requirements: ## Breaking changes -### TBD +### @ngrx/store +#### Preserve the event name case with createActionGroup +The event name case is preserved when converting to the action name by using the createActionGroup function. + +BEFORE: + +All letters of the event name will be lowercase, except for the initial letters of words starting from the second word, which will be uppercase. + +```ts +const authApiActions = createActionGroup({ + source: 'Auth API', + events: { + 'LogIn Success': emptyProps(), + 'login failure': emptyProps(), + 'Logout Success': emptyProps(), + logoutFailure: emptyProps(), + }, +}); + +// generated actions: +const { + loginSuccess, + loginFailure, + logoutSuccess, + logoutfailure, +} = authApiActions; +``` + +AFTER: + +The initial letter of the first word of the event name will be lowercase, and the initial letters of the other words will be uppercase. The case of other letters in the event name will remain the same. + +```ts +const authApiActions = createActionGroup({ + source: 'Auth API', + events: { + 'LogIn Success': emptyProps(), + 'login failure': emptyProps(), + 'Logout Success': emptyProps(), + logoutFailure: emptyProps(), + }, +}); + +// generated actions: +const { + logInSuccess, + loginFailure, + logoutSuccess, + logoutFailure, +} = authApiActions; +``` + +#### Strongly typed `createFeature` selectors + +Projectors of selectors generated by createFeature are strongly typed. + +BEFORE: + +Projector function arguments of selectors generated by createFeature are not strongly typed: + +```ts +const counterFeature = createFeature({ + name: 'counter', + reducer: createReducer({ count: 0 }), +}); + +counterFeature.selectCount.projector +// ^ type: (...args: any[]) => number +``` + +AFTER: + +Projector function arguments of selectors generated by createFeature are strongly typed: + +```ts +const counterFeature = createFeature({ + name: 'counter', + reducer: createReducer({ count: 0 }), +}); + +counterFeature.selectCount.projector +// ^ type: (featureState: { count: number; }) => number +``` + + +#### Remove `createFeature` signature with root state + +The `createFeature` signature with root state is removed in favor of a signature without root state. +An automatic migration is added to remove this signature. + +BEFORE: + +```ts +interface AppState { + users: State; +} + +export const usersFeature = createFeature({ + name: 'users', + reducer: createReducer(initialState, /* case reducers */), +}); +``` + +AFTER: + +```ts +export const usersFeature = createFeature({ + name: 'users', + reducer: createReducer(initialState, /* case reducers */), +}); +``` + +#### Replace `getMockStore` with `createMockStore` + +The `getMockStore` function is replaced in favor of `createMockStore`. +An automatic migration is added to rename the function. + +BEFORE: + +```ts +import { getMockStore } from '@ngrx/store/testing'; +const mockStore = getMockStore(); +``` + +AFTER: + +```ts +import { createMockStore } from '@ngrx/store/testing'; +const mockStore = createMockStore(); +``` + + +### @ngrx/router-store + +#### Replace `getSelectors` with `getRouterSelectors` + +The `getSelectors` function is replaced in favor of `getRouterSelectors`. +An automatic migration is added to rename the function. + +BEFORE: + +```ts +import { getSelectors } from '@ngrx/router-store'; + +const routerSelectors = getSelectors(); +``` + +AFTER: + +```ts +import { getRouterSelectors } from '@ngrx/router-store'; + +const routerSelectors = getRouterSelectors(); +``` + + +### @ngrx/schematics + +#### Replace `any` types with `unknown` type + +NgRx schematics do not use `any` types to define actions, these are replaced with the `unknown` type.