NgRx array state how to fix type convention?

Question

My state stores id:

export class RegistryBlockState {
  id: number[];
}

Reducer is:

const initialState = undefined;

const reducer = createReducer(
  initialState,
  on(RegistryActions.ToggleRegistryBlockAction, (state: RegistryBlockState, id: number) => ({
    ...state.id,
    id,
  }))
);

export function RegistryBlockReducer(
  state: RegistryBlockState | undefined,
  action: Action
) {
  return reducer(state, action);
}

When RegistryActions.ToggleRegistryBlockAction action fires I get current state: RegistryBlockState state and try to add a new id: number to this array state, then return it.

Actions is:

export const ToggleRegistryBlockAction = createAction(
  "[ToggleRegistryBlockOpen] - Toggle Registry",
  props<{ payload: number }>()
);

But I get this error message:

No overload matches this call.
  Overload 1 of 11, '(creator1: ActionCreator<"[ToggleRegistryBlockOpen] - Toggle Registry", (props: { payload: number; }) => { payload: number; } & TypedAction<"[ToggleRegistryBlockOpen] - Toggle Registry">>, reducer: OnReducer<...>): On<...>', gave the following error.
    Argument of type '(state: RegistryBlockState, id: number) => { id: number; length: number; toString(): string; toLocaleString(): string; pop(): number; push(...items: number[]): number; concat(...items: ConcatArray<number>[]): number[]; concat(...items: (number | ConcatArray<...>)[]): number[]; ... 25 more ...; includes(searchElement...' is not assignable to parameter of type 'OnReducer<RegistryBlockState, [ActionCreator<"[ToggleRegistryBlockOpen] - Toggle Registry", (props: { payload: number; }) => { payload: number; } & TypedAction<"[ToggleRegistryBlockOpen] - Toggle Registry">>]>'.
      Types of parameters 'id' and 'action' are incompatible.
        Type '{ payload: number; } & TypedAction<"[ToggleRegistryBlockOpen] - Toggle Registry"> & { type: "[ToggleRegistryBlockOpen] - Toggle Registry"; }' is not assignable to type 'number'.
  Overload 2 of 11, '(creator: ActionCreator<string, FunctionWithParametersType<any[], object>>, ...rest: (ActionCreator<string, FunctionWithParametersType<any[], object>> | OnReducer<...>)[]): On<...>', gave the following error.
    Argument of type '(state: RegistryBlockState, id: number) => { id: number; length: number; toString(): string; toLocaleString(): string; pop(): number; push(...items: number[]): number; concat(...items: ConcatArray<number>[]): number[]; concat(...items: (number | ConcatArray<...>)[]): number[]; ... 25 more ...; includes(searchElement...' is not assignable to parameter of type 'ActionCreator<string, FunctionWithParametersType<any[], object>> | OnReducer<RegistryBlockState, [ActionCreator<string, FunctionWithParametersType<...>>]>'.
      Type '(state: RegistryBlockState, id: number) => { id: number; length: number; toString(): string; toLocaleString(): string; pop(): number; push(...items: number[]): number; concat(...items: ConcatArray<number>[]): number[]; concat(...items: (number | ConcatArray<...>)[]): number[]; ... 25 more ...; includes(searchElement...' is not assignable to type 'ActionCreator<string, FunctionWithParametersType<any[], object>>'.
        Property 'type' is missing in type '(state: RegistryBlockState, id: number) => { id: number; length: number; toString(): string; toLocaleString(): string; pop(): number; push(...items: number[]): number; concat(...items: ConcatArray<number>[]): number[]; concat(...items: (number | ConcatArray<...>)[]): number[]; ... 25 more ...; includes(searchElement...' but required in type 'TypedAction<string>'.ts(2769)
models.d.ts(5, 14): 'type' is declared here.

Answer 1

try this:

actions:

export const ToggleRegistryBlockAction = createAction(
  "[ToggleRegistryBlockOpen] - Toggle Registry",
  props<{ id: number }>()
);

reducer:

const reducer = createReducer(
  initialState,
  on(RegistryActions.ToggleRegistryBlockAction, (state: RegistryBlockState, {id}) => ({
    ...state,
    id
  }))
);

Your action props and reducer attributes must have the same name.