Angular NgRx: значение состояния не отображается в компоненте

Question

Я новичок в Angular, и я учусь, как использовать ngRx из здесь .

Так что я реализую свое состояние, как показывает преподаватель в видео, все идет хорошо, но я не могу отобразить состояние в моем компоненте приложения.

Вот мои фрагменты кода.

App.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { StoreModule } from "@ngrx/store";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";

import { postReducer } from "./reducers/post.reducer";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot({ post: postReducer }),
    StoreDevtoolsModule.instrument({ maxAge: 10 })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

App.component. html

  <div *ngIf="post | async as p">
  <h2>{{ p.text }}</h2>
  <h4>{{ p.likes }}</h4>

  <button (click)="upVote()">Up</button>
  <button (click)="downVote()">Down</button>

  <button (click)="resetPost()">Reset</button>

  <input type="text" [(ngModel)]="text" />
  <button (click)="editText()">Edit</button>
</div>

app.component.ts

import { Component } from "@angular/core";

import { Store } from "@ngrx/store";
import { Observable } from "rxjs";

import { Post } from "./post.model";
import * as PostActions from "./actions/post.action";

interface AppState {
  post: Post;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  post: Observable<Post>;
  text: string;

  constructor(private store: Store<AppState>) {
    this.post = this.store.select("post");
  }

  editText() {
    this.store.dispatch(new PostActions.EditText(this.text));
  }

  resetPost() {
    this.store.dispatch(new PostActions.Reset());
  }
  upVote() {
    this.store.dispatch(new PostActions.Upvote());
  }
  downVote() {
    this.store.dispatch(new PostActions.Downvote());
  }

}

post.action.ts

import { Action } from "@ngrx/store";

export const EDIT_TEXT = "[Post] Edit";
export const UPVOTE = "[Post] Upvote";
export const DOWNVOTE = "[Post] Downvote";
export const RESET = "[Post] Reset";

export class EditText implements Action {
  readonly type = EDIT_TEXT;

  constructor(public payload: string) {}
}

export class Upvote implements Action {
  readonly type = UPVOTE;
}
export class Downvote implements Action {
  readonly type = DOWNVOTE;
}
export class Reset implements Action {
  readonly type = RESET;
}

export type All = Upvote | Downvote | Reset | EditText;

post.reducer.ts

import * as PostActions from "../actions/post.action";
import { Post } from "../post.model";

export type Action = PostActions.All;

const defaultState: Post = {
  text: "Hii Its my 1st post",
  likes: 3
};

const newState = (state, newData) => {
  return Object.assign({}, state, newData);
};

export function postReducer(state: Post = defaultState, action: Action) {
  console.log(state, action.type);
  switch (action.type) {
    case PostActions.EDIT_TEXT:
      return newState(state, {text: action.payload});
    case PostActions.UPVOTE:
      return newState(state, { likes: state.likes + 1 });
    case PostActions.DOWNVOTE:
      return newState(state, { likes: state.likes - 1 });
    case PostActions.RESET:
      return defaultState;
  }
}

и вывод, который я получаю как

Пожалуйста, помогите мне, чтобы исправить свои проблемы. Спасибо