Angular试用NGRX时，Store返回对象而非数字的问题求助

你遇到的问题是因为根Store的结构和你定义的AppState不匹配：

在AppModule中，你通过StoreModule.forRoot({ counter: appReducer })将appReducer挂载到了根Store的counter字段上，但appReducer本身管理的是包含counter属性的AppState对象。这就导致根Store的实际结构变成了：

{
  counter: {
    counter: 1 // 这里才是你要的数字值
  }
}

所以当你在组件中通过select((state: AppState) => state.counter)获取值时，拿到的是整个{ counter: 1 }对象，而非预期的数字。

方案一：简化Reducer管理的State结构 #

如果你的Store只需要管理计数器这一个状态，可以直接让Reducer管理数字类型的State：

1. 修改app.state.ts：

export type AppState = number;
export const initialState: AppState = 0;

2. 修改app.reducer.ts：

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './app.actions';
import { initialState } from './app.state';

export const appReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1)
);

3. 调整组件中的订阅逻辑：

ngOnInit() {
  this.store.pipe(select((state: AppState) => state)).subscribe((value) => {
    console.log(value);
    this.counter = value;
  });
}

方案二：保持现有State结构，修正Store注册和组件选择逻辑 #

如果需要保留AppState的对象结构，调整如下：

1. 修改AppModule中的Store注册：

// 将counter改为更清晰的名称，比如counterState
StoreModule.forRoot({ counterState: appReducer }),

2. 调整组件中的选择器：

ngOnInit() {
  this.store.pipe(select((state) => state.counterState.counter)).subscribe((value) => {
    console.log(value);
    this.counter = value;
  });
}

两种方案都能解决问题，根据你的项目后续扩展需求选择即可。

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