webmasterdevlin

import { EntityStore, StoreConfig } from '@datorama/akita';
import { HeroesState, HeroModel } from './hero.model';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'heroes' })
export class HeroesStore extends EntityStore<HeroesState, HeroModel> {
  constructor() {
    super();
  }

webmasterdevlin

import { ID, EntityState } from '@datorama/akita';

export type HeroModel = {
  id: ID;
  firstName: string;
  lastName: string;
  house: string;
  knownAs: string;
};

webmasterdevlin

<div class="container">
  <app-new-item-form
    [isShowNewItemForm]="isShowNewItemForm"
    [newItemForm]="newItemForm"
    (handleSubmit)="onSubmit()"
    (handleCancelForm)="cancelForm()"
    (handleShowNewItemForm)="showNewItemForm()"
  ></app-new-item-form>
  <app-item-list
    [editItemUrl]="editItemUrl"

webmasterdevlin

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

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { NgxsModule } from "@ngxs/store";
import { HeroState } from "./heroes/hero.state";
import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";
import { NgxsLoggerPluginModule } from "@ngxs/logger-plugin";

webmasterdevlin

import { Component, OnInit } from "@angular/core";
import { Select, Store } from "@ngxs/store";
import { AddHero, DeleteHero, GetHeroes } from "../hero.action";
import { HeroState } from "../hero.state";
import { Observable } from "rxjs";
import { Hero } from "../hero.model";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-heroes",

webmasterdevlin

import { Hero } from "./hero.model";
import { Action, Selector, State, StateContext } from "@ngxs/store";
import { HeroService } from "./hero.service";
import {
  AddHero,
  DeleteHero,
  GetHeroById,
  GetHeroes,
  UpdateHero
} from "./hero.action";

webmasterdevlin

import { Hero } from "./hero.model";

export class GetHeroes {
  static readonly type = "[Hero] Get";
}

export class GetHeroById {
  static readonly type = "[Hero] GetById";
  constructor(public id: string) {}
}

webmasterdevlin

<div class="container">
  <app-new-item-form
    [isShowNewItemForm]="isShowNewItemForm"
    [newItemForm]="newItemForm"
    (handleSubmit)="onSubmit()"
    (handleCancelForm)="cancelForm()"
    (handleShowNewItemForm)="showNewItemForm()"
  ></app-new-item-form>

  <app-item-list

webmasterdevlin

import { Component, OnInit } from "@angular/core";
import { Store } from "@ngrx/store";
import { selectHero, State } from "../../reducers";

import { Hero } from "../../models/hero.model";
import * as heroActions from "../../actions/hero.actions";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-heroes",

webmasterdevlin

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { StoreModule } from "@ngrx/store";
import { reducers, metaReducers } from "./reducers";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
import { environment } from "../environments/environment";
import { AppRoutingModule } from "./app-routing.module";
import { HeaderNavComponent } from "./shared/components/header-nav.component";
import { EffectsModule } from "@ngrx/effects";
import { HttpClientModule } from "@angular/common/http";