Angular 角度分量不反映NGRX存储状态

我正在玩Angular和ngrx，并遵循了几个不同的教程来启动一些ngrx商店。我用的是ngrx-10和angular-11。设置相当简单

app/store/action.ts

export const toggleSideNav = createAction('[SideNav Component] Toggle', props<{showSideNav?: boolean}>());

app.module.ts

...
StoreModule.forRoot({appStore : AppReducer}, {})
...

/visitorsubmodule/components/home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

  showSideNav$: Observable<boolean>;

  constructor(private store: Store<AppState>) { 
    this.showSideNav$ = store.pipe(select(x => x.showSideNav))
  }

  ngOnInit(): void {
  }

  toggleSideNav(): void {
    this.store.dispatch(toggleSideNav({}));
  }
}

最后， /访问者/组件/home.component.html

<div *ngIf="showSideNav$ | async">
    it works
</div>
<button (click)="toggleSideNav()">
    Toggle
</button>

我正在使用ngrx开发工具，我可以看到showSideNav作品的切换。它在真与假之间摇摆，但文本从不显示。就像showSideNav$总是未定义一样。

您的选择器返回未定义。我想您的选择器函数应该如下所示：

select(x => x.appStore.showSideNav)

---

我意识到这没有帮助，也不会回答你的问题，但我自己的问题是，你为什么要使用ngrx商店？这是我个人的一个探索，想找出人们为什么使用它，因为到目前为止，我还没有看到使用它的好处。在我看到的每一个试图使用它的项目中，它只缝合了痛苦和绝望。你问这个问题很有趣。我读了一篇文章讨论了这一点，我确实开始考虑离开ngrx。但正如我在帖子中所说，我正在四处玩耍，学习角度和周围的事物。我之前曾专业使用React+ReduxMobX，这对我来说效果很好，所以我喜欢商店的概念。也许最后我从这段劳动中学到的是远离ngrx，这很好。在我解决这个问题之前，我不能放弃它。ngrx非常适合大型应用——良好的原理图、良好的结构、方便的商店选择方式。对于小型应用程序，它可能有太多的样板文件，而AppState没有属性appStore。但我认为这接近解决方案。我相信我在模块中的声明是不对的。好吧，我已经试过了，最终成功地解决了这个问题。你完全正确。要获得正确的属性，我需要深入appStore。Typescript不喜欢它，但它仍然有效。我现在注射了药店而不是药店来让TS开心。但现在它起作用了，我可以进一步调查。非常感谢。

select(x => x.appStore.showSideNav)