在NgRx中传递自定义值报错：期望0个参数却传入1个

核心问题 #

报错根源是Action定义的props参数名和组件dispatch时传入的参数名不匹配，TypeScript严格类型检查触发了错误。另外还有reducer逻辑未正确处理增量的问题。

具体修复步骤 #

1. 统一Action与组件的参数名

你在.actions文件中定义customIncreament时，props的键是counter：

export const customIncreament = createAction(
    'customIncreament', props<{counter:number}>);

但组件中dispatch时传入的是value键：

this.store.dispatch(customIncreament({value: this.value}))

两种修正方案二选一：

• 方案A：修改Action的props键为value

  // counter.actions.ts
  export const customIncreament = createAction(
      'customIncreament', props<{value: number}>);
  

• 方案B：修改组件dispatch的参数键为counter

  // 组件.ts
  addValue() {
      console.log(this.value);
      this.store.dispatch(customIncreament({counter: this.value}))
  }
  

2. 修复Reducer的增量逻辑

当前reducer中customIncreament的处理没有实际累加传入的值，修改如下（以方案A为例，参数用value）：

// counter.reducer.ts
on(customIncreament, (state, { value }) => {
    return {
        ...state,
        counter: state.counter + value
    }
}),

如果选方案B，就把解构改成{ counter }，逻辑改为state.counter + counter。

3. 优化组件的类型定义

把组件中value: any改为value: number，和Action的props类型保持一致，避免隐式类型转换问题：

// 组件.ts
value: number = 0; // 建议初始化值
name: string = ''

4. 清理冗余代码

• 组件中alternavtive拼写错误，改为alternative
• reducer文件中导入的changeNameAction未使用，可删除该导入

修复后关键代码示例 #

counter.actions.ts（方案A）

import { createAction, props } from "@ngrx/store";

export const increment = createAction('increment');
export const decrement = createAction('decrement');
export const reset = createAction('reset');

export const customIncreament = createAction(
    'customIncreament', props<{value: number}>);

组件.ts（方案A）

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { customIncreament } from './counter.actions';
import { CounterState } from './counter.state';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {
  value: number = 0;
  name: string = ''

  constructor(private store: Store<{ counter: CounterState }>) { }

  ngOnInit() {
    // 替代subscribe的方式可使用async pipe
  }

  addValue() {
    console.log(this.value);
    this.store.dispatch(customIncreament({value: this.value}))
  }
}

counter.reducer.ts

import { createReducer, on } from "@ngrx/store";
import { customIncreament, decrement, increment, reset } from "./counter.actions";
import { inititalState } from "./counter.state";

const _counterReducer = createReducer(inititalState,
    on(increment, (state) => {
        return {
            ...state,
            counter: state.counter + 1,
        };
    }),
    on(decrement, (state) => {
        return {
            ...state,
            counter: state.counter - 1,
        };
    }),
    on(reset, (state) => {
        return {
            ...state,
            counter: 0,
        };
    }),
    on(customIncreament, (state, { value }) => {
        return {
            ...state,
            counter: state.counter + value
        }
    }),
);

export function counterReducer(state: any, action: any) {
    return _counterReducer(state, action);
}

内容的提问来源于stack exchange，提问作者Lucky Gore