Example of Mobx table operations store

SuccessTableStore.js

 import { observable, action } from 'mobx';
import OperationTablesService from '../services/OperationTablesService';
import storage from '../helpers/storage';

class SuccessTableStore {
    filter = storage.get('filter');
    pageCount = 20;
    @observable operations = [];
    @observable totalCount = 0;
    @observable tableCount = 0;
    @observable loading = false;
    @observable loaded = false;
    @observable isOpen = storage.get('successTableIsOpen');
    @observable isOKClicked = false;
    @observable sourceId = this.filter ? this.filter.sourceId : 0;
    @observable sourceType = this.filter ? this.filter.sourceType : 0;

    @action loadOperationsCount() {
        this.resetStore();
        return OperationTablesService.getSuccessOperationsCount(this.sourceId, this.sourceType)
            .then((response) => {
                this.totalCount = response;
            });
    }

    @action setMoneySource(sourceId, sourceType) {
        this.sourceId = Number(sourceId) || null;
        this.sourceType = Number(sourceType) || null;
    }

    @action loadOperations(options = { reset: false }) {
        const { operations } = this;
        const offset = options.reset ? 0 : operations.length;
        const count = options.reset ? Math.max(operations.length, this.pageCount) : this.pageCount;

        this.loading = true;

        if (options.reset) {
            this.operations = [];
            this.loaded = false;
        }

        return OperationTablesService.getSuccessOperationsList(offset, count, this.sourceId, this.sourceType)
            .then(resp => {
                const operationList = options.reset ? resp.Operations : this.operations.concat(resp.Operations);

                this.operations = operationList;
                this.tableCount = operationList.length;
                this.totalCount = resp.TotalCount;
                this.loaded = !!operationList.length;
                this.loading = false;

                return resp;
            });
    }

    @action resetStore() {
        this.operations = [];
        this.totalCount = 0;
        this.tableCount = 0;
        this.loading = true;
        this.loaded = false;
        this.isOpen = false;
        this.isOKClicked = false;
    }

    @action setOperation(operations) {
        this.operations.replace(operations);
    }

    @action approveOperations() {
        const { sourceType, sourceId } = this;

        return OperationTablesService.approveOperations({ sourceType, sourceId });
    }
}

export default SuccessTableStore;