Mobx Store : src/stores/hero.store.ts

hero.store.ts

import { decorate, observable, action } from "mobx";
import { Hero } from "../models/hero";
import {
  addHero,
  getHero,
  getHeroes,
  removeHero,
  updateHero
} from "./hero-service";

class HeroStore {
  
   /*  These are the state if your application.
       They will be put in the decorate utility
       to be observed by observable for changes  */
  heroes: Hero[] = [];
  hero: Hero = {} as Hero;
  error: string = "";
  fetching: boolean = false;

  loadHeroes = async () => {
    try {
      const { data } = await getHeroes(); // a service that sends get request to the backend service. 
      this.heroes = data.reverse(); // reverses the data that came from the service then assign it to the Hero[] heroes.
    } catch (e) {
      this.error = `${e.response.status} error`; // if there's a problem retrieving the data, assign the error response to the string error.
    }
  };

  loadHero = async (id: string) => {
    try {
      const { data } = await getHero(id); // this service sends get request to retrieve the object with the id from the argument string id
      this.hero = data;
    } catch (e) {
      this.error = `${e.response.status} error`;
    }
  };

  postHero = async (hero: Hero) => {
    try {
      await addHero(hero).then(() => this.heroes.unshift(hero)); // this service sends post request to the backend. After successful request, the hero is place to the top of the array.
    } catch (e) {
      this.error = `${e.response.status} error`;
    }
  };

  putHero = async (hero: Hero) => {
    try {
      await updateHero(hero); // this service send put request to the backend service
      const index = this.heroes.findIndex(h => h.id === hero.id);
      this.heroes[index] = hero; // replacing or updating the existing object located at the index of the Hero[] heroes
    } catch (e) {
      this.error = `${e.response.status} error`;
    }
  };

  deleteHero = async (id: string) => {
    try {
      await removeHero(id);
      const index = this.heroes.findIndex(h => h.id === id);
      this.heroes.splice(index, 1); // directly removing the object from the Hero[] heroes
    } catch (e) {
      this.error = `${e.response.status} error`;
    }
  };
}

decorate(HeroStore, {
  heroes: observable, // OBSERVABLE is monitoring the array heroes' value for changes
  hero: observable,
  error: observable,
  fetching: observable,
  loadHeroes: action, // the method loadHeroes can now change the value of the state thru the ACTION
  loadHero: action,
  postHero: action,
  putHero: action,
  deleteHero: action
});

const heroStore = new HeroStore(); // creating an instance of the HeroStore
export default heroStore;