使用NGRX时state结构意外混入reducer属性的问题求助

你遇到的这个reducer属性意外混入state结构的问题，其实是NgRx模块配置时的传参错误导致的，咱们一步步拆解：

问题出在哪？ #

你在CriteriaLockModule里的配置是这样的：

StoreModule.forFeature('criteria-lock', { reducer })

这里的第二个参数如果传入一个对象，NgRx会把对象中的每个属性都当作独立的子reducer来处理，最终会把你的reducer函数对应的state嵌套在reducer这个属性下面——这就是为什么你的criteria-lock state会变成{ reducer: { selectedStoreName: '' } }的原因。

而你预期的是criteria-lock直接对应CriteriaLockState类型的对象，配置方式不对就导致了结构错位，选择器自然拿不到正确的值。

怎么修复？ #

只需要把配置里的对象包装去掉，直接传入reducer函数即可：

StoreModule.forFeature('criteria-lock', reducer)

验证修复效果 #

修改配置后：

1. 你的选择器getSelectedStoreName不需要做任何改动，因为此时createFeatureSelector<CriteriaLockState>('criteria-lock')拿到的就是你定义的CriteriaLockState结构，和预期一致。
2. 再次dispatch动作后，store.select(getSelectedStoreName)就能正常返回对应的值了。

另外你提到Reducer内部打印state正常，这是因为reducer函数本身处理的是自己管理的state（也就是initialState对应的结构），问题并不在reducer逻辑里，而是在模块配置时的state组合环节。

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