Add thunks to perform side effects

hero-store.js

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();
      actions.setHeroes(data);
    } catch (e) {
      actions.setError(e);
    }
    actions.setIsLoading();
  }),
  getHeroById: thunk(async (actions, id) => {
    actions.setIsLoading();
    try {
      const { data } = await getHeroById(id);
      actions.setHero(data);
    } catch (e) {
      actions.setError(e);
    }
    actions.setIsLoading();
  }),
  postHero: thunk(async (actions, newHero) => {
    actions.setIsLoading();
    try {
      const { data } = await postHero(newHero);
      actions.addHero(data);
    } catch (e) {
      actions.setError(e);
    }
    actions.setIsLoading();
  }),
  // Pessimistic UI update
  deleteHero: thunk(async (actions, id) => {
    actions.setIsLoading();
    try {
      await deleteHero(id);
      actions.removeHero(id);
    } catch (e) {
      actions.setError(e);
    }
    actions.setIsLoading();
  }),
  putHero: thunk(async (actions, updatedHero) => {
    actions.setIsLoading();

    try {
      await putHero(updatedHero);
      actions.updateHeroes(updatedHero);
    } catch (e) {
      actions.setError(e);
    }
    actions.setIsLoading();
  })
});

export default HeroStore;