使用ngRx实现计数器示例时无法查看count值的问题

嘿，我一眼就找到问题根源了——你的Store状态结构和你尝试选择状态的路径不匹配，这就是counter$无法捕捉到状态变化的核心原因。

让我拆解一下问题：

1. 状态结构不匹配的原因 #

你在AppModule里注册reducer时写了：

StoreModule.forRoot({counterReducer})

这相当于给根Store状态添加了一个名为counterReducer的键，对应的value就是counterReducer处理后的状态（也就是你定义的AppState）。所以实际的Store状态结构是这样的：

{
  counterReducer: {
    count: 0 // 这才是你的计数器数值
  }
}

但你在组件里却直接尝试选择顶层的count键：

this.counter$ = this.store.select('count');

这个路径根本不存在，所以counter$自然不会发出任何值。

2. 两种解决方案 #

方案一：调整状态选择的路径

直接匹配Store的实际结构，修改组件里的代码：

// 方式1：用箭头函数精准选择
this.counter$ = this.store.select(state => state.counterReducer.count);

// 方式2：用字符串链式路径
this.counter$ = this.store.select('counterReducer', 'count');

方案二：规范reducer注册的键名

如果你希望Store的结构和你定义的AppState完全一致，可以修改AppModule里的reducer注册：

StoreModule.forRoot({ count: counterReducer })

这样你的Store状态结构就和AppState对应上了，此时原来的this.store.select('count')就能正常工作。

3. 额外的注意事项 #

• 确保模板正确订阅：在组件模板里一定要用async管道订阅counter$（这是Angular里处理Observable最推荐的方式，会自动管理订阅和取消）：

<p>当前计数：{{ counter$ | async }}</p>
<button (click)="increase()">+1</button>
<button (click)="decrease()">-1</button>

如果手动订阅，记得在ngOnDestroy里取消订阅，避免内存泄漏。

• 优化reducer的类型检查：你的reducer里的action参数应该用你定义的All类型，而不是通用的Action，这样TypeScript能帮你拦截错误的action类型：

export function counterReducer(state: AppState = initState, action: All) {
  switch (action.type) {
    case INCREMENT:
      return Object.assign({}, state, { count: state.count + 1 });
    case DECREMENT:
      return Object.assign({}, state, { count: state.count - 1 });
    default:
      return state;
  }
}

按照上面的方法修改后，你的计数器应该就能正常响应状态变化了！

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