Попытка сделать условный рендеринг по состоянию ngrx

Question

Я начал использовать ngrx в своем приложении пару дней go, и мне удалось составить список продуктов, указав c Модель. Смотрите файл ts:

export class ProductsComponent implements OnInit {
  products: Observable<Product[]>;
  constructor(private store: Store<AppState>, private ps: ProductsService) {
    this.products = store.select("product");
  }

ngOnInit(): void {
    this.ps
      .getProducts()
      .subscribe(data =>
        data.forEach(product => this.store.dispatch(new GetProducts(product)))
      );
  }
}

html:

<div class="right" *ngIf="products">
  <h3>Tutorials</h3>
  <ul>
    <li *ngFor="let product of products | async">
      <a target="_blank">{{ product.name }}</a>
    </li>
  </ul>
</div>

Как вы можете видеть, элемент li имеет массив для l oop over products, рендеринг объектов (продуктов).

Сейчас я пытаюсь сделать условный рендеринг с помощью логического состояния, когда пользователь вошел в систему.

Это модель:

export interface isLogged {
  logged: boolean;
}

Действия:

import { Injectable } from "@angular/core";
import { Action } from "@ngrx/store";
import { isLogged } from "../models/isLogged.mode";

export const SET_LOGGED = "[ISLOGGED] SET_LOGGED";
export const REMOVE_TUTORIAL = "[PRODUCT] Remove";

export class Set_Logged implements Action {
  readonly type = SET_LOGGED;

  constructor(public payload) {}
}

export type Actions = Set_Logged;

Редуктор:

import { Action } from "@ngrx/store";
import { isLogged } from "../models/isLogged.mode";
import * as loggedActions from "../actions/isLogged.actions";

const initialState = false;

export function isLoggedReducer(
  state = initialState,
  action: loggedActions.Actions
) {
  switch (action.type) {
    case loggedActions.SET_LOGGED:
      console.log(state);
      return action.payload;
    default:
      return state;
  }
}

Состояние приложения:

export interface LogState {
  readonly isLogged;
}

Этот компонент:

import { isLogged } from "../../models/isLogged.mode";
import { Set_Logged } from "../../actions/isLogged.actions";
import { LogState } from "../../app.state";

export class LoginPageComponent implements OnInit {
isLogged: Observable<isLogged>;

constructor(private store: Store<LogState>){
this.isLogged = store.select("isLogged");
}
ngOnInit() {
    this.store.dispatch(new Set_Logged(true));
  }
}

HTML условный рендеринг:

<div *ngIf="isLogged">You are logged.</div>

Я попытался установить переменную isLogged в состояние хранения так же, как я делал с продуктами, но не с массивом, но он продолжает отображать div на странице , Когда я пытаюсь console.log(this.isLogged) он регистрирует объект хранилища отверстий, а не состояние. Почему это работает с продуктами, а не когда я пытаюсь получить логическое состояние? Моя цель - визуализировать <div *ngIf="isLogged">You are logged.</div> только тогда, когда состояние isLogged истинно.