import {action, computed, makeObservable, observable, runInAction} from "mobx"; import {merchantApi, serverApi} from "../../api"; export default class MerchantStore { merchant = [] async constructor() { makeObservable(this, { merchant: observable, getMerchant: action }); await this.getMerchant() } async getMerchant() { try { let page_state = null let firstFetch = true let merchant = [] while (page_state || firstFetch) { const { data } = await merchantApi().get('/v1/merchants', {params:{firm:"SHS",page_count:100}}); merchant = [...merchant, data.merchant] page_state = data.page_state firstFetch = false } // after await, modifying state again, needs an actions: runInAction(async () => { this.merchant = merchant }) } catch (error) { runInAction(() => { this.state = "error"; this.message = error.response.data.message }) } } filterMerchant = (filter) => { return this.merchant.filter(merchant => { return filter.data === merchant.service }) } }