角分量不反映NGRX存储状态。

Question

我正在玩角和ngrx，并遵循几个不同的教程，以获得一些ngrx商店开始。我用的是ngrx-10和角-11。设置非常小。

app/store/action.ts

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

app/商店/还原机

export interface AppState {
    showSideNav: boolean
}

export const initialState: AppState = {
    showSideNav: true
};

const _appReducer = createReducer(
    initialState,
    on(toggleSideNav, (state: AppState, {showSideNav}) => ({...state, showSideNav: showSideNav ?? !state.showSideNav }))
);

export function AppReducer(state: AppState = initialState, action: Action) {
    return _appReducer(state, action);
}

app.module.ts

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

/visitors(submodule)/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({}));
  }
}

最后，/访问者/components/home.component.html.Component.html

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

我正在使用ngrx，我可以看到"showSideNav“工作的切换。它在正确和错误之间失败，但文本从未显示出来。就好像showSideNav$总是没有定义一样。

Answer 1

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

select(x => x.appStore.showSideNav)