webmasterdevlin

import React, { useState, useEffect } from "react";
import NewItemForm from "../../shared/components/NewItemForm";
import { Link } from "@reach/router";
import HeroStore from "../hero-store";

export default function Heroes() {
  /*part of the Easy-Peasy pattern*/
  const { heroes, hero, isLoading } = HeroStore.useStoreState(
    state => state
  );

webmasterdevlin

import { action, computed, createContextStore, thunk } from 'easy-peasy'
import { deleteHero, getHeroById, getHeroes, postHero, putHero } from './hero-service'

const HeroStore = createContextStore({
  /*states here*/
  /*actions thunk side effects here*/
  /*actions here*/
  /*computed values i.e. derived state*/
  totalHeroes: computed(state => Object.values(state.heroes).length)
});

webmasterdevlin

import { action, computed, createContextStore, thunk } from 'easy-peasy'
import { deleteHero, getHeroById, getHeroes, postHero, putHero } from './hero-service'

const HeroStore = createContextStore({
  /*states here*/
  /*actions thunk side effects here*/
  /*actions here*/
  /*computed values i.e. derived state here*/
});

webmasterdevlin

import { action, computed, createContextStore, thunk } from 'easy-peasy'
import { deleteHero, getHeroById, getHeroes, postHero, putHero } from './hero-service'

const HeroStore = createContextStore({
  /*states here*/
  /*actions thunk side effects here*/
  /*actions*/
  setHeroes: action((state, heroes) => {
    state.heroes = heroes;
  }),

webmasterdevlin

import { action, computed, createContextStore, thunk } from 'easy-peasy'
import { deleteHero, getHeroById, getHeroes, postHero, putHero } from './hero-service'

const HeroStore = createContextStore({
  /*states here*/
  /*actions thunk side effects*/
  getHeroes: thunk(async actions => {
    actions.setIsLoading();
    try {
      const { data } = await getHeroes();

webmasterdevlin

import { action, computed, createContextStore, thunk } from 'easy-peasy'
import { deleteHero, getHeroById, getHeroes, postHero, putHero } from './hero-service'

const HeroStore = createContextStore({
  /*states*/
  heroes: [],
  hero: {
    id: "",
    firstName: "",
    lastName: "",

webmasterdevlin

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HeroModel } from '../hero.model';
import { HeroesQuery } from '../heroes.query';
import { HeroesService } from '../heroes.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',

webmasterdevlin

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderNavComponent } from './shared/components/header-nav.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';

webmasterdevlin

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { HeroModel } from './hero.model';
import { throwError } from 'rxjs';
import { BaseUrl } from '../shared/api.config';
import { HeroesStore } from './heroes.store';
import { catchError } from 'rxjs/operators';
import { ID } from '@datorama/akita';

@Injectable({

webmasterdevlin

import { Injectable } from '@angular/core';
import { QueryEntity } from '@datorama/akita';
import { HeroesStore } from './heroes.store';
import { HeroesState, HeroModel } from './hero.model';

@Injectable({ providedIn: 'root' })
export class HeroesQuery extends QueryEntity<HeroesState, HeroModel> {
  constructor(protected heroesStore: HeroesStore) {
    super(heroesStore);
  }