NgRx 数组状态如何修复类型约定？

Question

我的状态存储 ID：

export class RegistryBlockState {
  id: number[];
}

减速器是：

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);
}

当 RegistryActions.ToggleRegistryBlockAction 动作触发时，我得到当前的 state: RegistryBlockState 状态并尝试向这个数组状态添加一个新的 id: number，然后 return 它。

操作是：

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

但我收到此错误消息：

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

试试这个：

操作：

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

减速器：

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

你的 action props 和 reducer 属性必须同名。

NgRx 数组状态如何修复类型约定？

NgRx array state how to fix type convention?

redux

ngrx

angular