How to use the mobx.action function in mobx

setTableData({ nameOfIdentifier: 'asset', objectToSet: state.assetKeyholdersTable })
  );
  const setRepoVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.repoVotesTable })
  );
  const setRepoVoteResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.repoVoteResultsTable })
  );
  
  const setCGPAllocationVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpAllocationVotesTable })
  );
  const setCGPPayoutVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpPayoutVotesTable })
  );
  const setCGPAllocationResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpAllocationResultsTable })
  );
  const setCGPPayoutResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpPayoutResultsTable })
  );
  // add also setters to control both types at the same time
  const setCGPVotesTablesData = action((params = {}) => {
    setCGPAllocationVotesTableData(params);
    setCGPPayoutVotesTableData(params);
  });
  const setCGPVoteResultsTablesData = action((params = {}) => {
    setCGPAllocationResultsTableData(params);
    setCGPPayoutResultsTableData(params);
  });

  const saveToStorage = action(state => {

setTableData({ nameOfIdentifier: 'address', objectToSet: state.contractAssetsTable })
  );
  const setContractCommandsTableData = action(
    setTableData({ nameOfIdentifier: 'address', objectToSet: state.contractCommandsTable })
  );
  const setAssetsTableData = action(setTableData({ objectToSet: state.assetsTable }));
  const setAssetTxsTableData = action(
    setTableData({ nameOfIdentifier: 'asset', objectToSet: state.assetTxsTable })
  );
  const setAssetKeyholdersTableData = action(
    setTableData({ nameOfIdentifier: 'asset', objectToSet: state.assetKeyholdersTable })
  );
  const setRepoVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.repoVotesTable })
  );
  const setRepoVoteResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.repoVoteResultsTable })
  );
  
  const setCGPAllocationVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpAllocationVotesTable })
  );
  const setCGPPayoutVotesTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpPayoutVotesTable })
  );
  const setCGPAllocationResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpAllocationResultsTable })
  );
  const setCGPPayoutResultsTableData = action(
    setTableData({ nameOfIdentifier: 'interval', objectToSet: state.cgpPayoutResultsTable })
  );
  // add also setters to control both types at the same time

.catch((error) => {
        console.error(error);
      })
  };

  @action("open modal vote")
  vote(voteId) {
    this.voteId = voteId;
  }

  @action("open modal add new item")
  addNewItem() {
    this.isAddNewItem = true;
  }

  @action("close modal add new item")
  closeModalAddNewItem() {
    this.isAddNewItem = null;
  }

  @action("close modal vote")
  closeModalVote() {
    this.voteId = null;
  }

  @action("set balance")
  setBalance(balance) {
    this.currentBalance = balance;
  }

  @action("set account")
  setAccount(account) {

fetch(options = {}) {

        const data = this.buildFetchData(options);
        const promise = this.wrapPendingRequestCount(
            this.__getApi()
            .fetchStore({
                url: options.url || result(this, 'url'),
                data,
                requestOptions: omit(options, 'data'),
            })
            .then(action(res => {
                this.__state.totalRecords = res.totalRecords;
                this.fromBackend(res);

                return res.response;
            }))
        );

        return promise;
    }

if (changes.added.length > 0) {
                        this.activeTab = "added";
                    } else if (changes.deleted.length > 0) {
                        this.activeTab = "deleted";
                    } else if (changes.moved.length > 0) {
                        this.activeTab = "moved";
                    } else if (changes.updated.length > 0) {
                        this.activeTab = "updated";
                    } else if (changes.newEnums.length > 0) {
                        this.activeTab = "newEnums";
                    }
                })
            )
            .catch(
                action((err: any) => {
                    this.error = err;
                })
            );

        this.handleSelectAllCheckboxes();
    }

}
        })).then(action('deleted', () => {
          gh.comments = gh.comments.filter((c) => c.sha !== comment.sha);
          gh.loading = false;
        }));
      })
    .then(gh.loadComments)
    .catch(gh.loadComments);
  });
});

function deleteBranch(branch) {
  return apiRequest(`/repos/${repo}/git/refs/heads/${branch}`, {method: 'DELETE'});
}

gh.updatePR = action(function updatePR(pr, state) {
  return apiRequest(`/repos/${repo}/pulls/${pr.number}`, {
    method: 'PATCH',
    body: JSON.stringify({state: state})
  }).then(({data}) => {
    data.state = 'closed';
    return data;
  });
});

gh.removePR = action(function removePR(pr) {
  gh.awaiting_moderation = gh.awaiting_moderation.filter((p) => p.id !== pr.id);
})

gh.deleteCheckedPRs = action(function deleteCheckedPRs() {
  gh.awaiting_moderation.filter((c) => c.checked).forEach((pr) => {
    gh.updatePR(pr, 'closed')

@action deleteArticle(slug) {
    this.articlesRegistry.delete(slug);
    return agent.Articles.del(slug)
      .catch(action(err => { this.loadArticles(); throw err; }));
  }
}

render() {
    const {viewModel} = this.props
    const {tabs, height} = viewModel
    const onTabsDragOver = (e: React.DragEvent) => {
      e.preventDefault()
    }
    const onTabsDrop = (e: React.DragEvent) => {
      const index = dropXIndexAt(this.tabsElement, e.clientX)
      if (viewModel.root.draggingTab) {
        viewModel.root.draggingTab.moveToNewRow(viewModel, index)
      }
    }
    const onSeparatorMove = action((dy: number) => {
      viewModel.height += dy
    })
    return (
      <div>
        <div> this.tabsElement = e} onDragOver={onTabsDragOver} onDrop={onTabsDrop}&gt;
          {
            tabs.map((t, i) =&gt; {
              const className = classNames("DockRow_tab", {"DockRow_tab-selected": t.selected})
              const onClick = () =&gt; this.props.viewModel.currentTabIndex = i
              const onDragStart = (e: React.DragEvent) =&gt; {
                e.dataTransfer.setData("DockTab", "")
                this.props.viewModel.root.draggingTab = t
              }
              return <div draggable="{true}">{t.title}</div>
            })
          }</div></div>

current: 1,
        pageSize: 10,
        total: 0,
      };
      this.loading = false;
      return;
    }

    return axios.get(`/iam/v1/projects/types/paging_query?${queryString.stringify({
      name: filters.name,
      code: filters.code,
      description: filters.description,
      params: params.join(','),
      sort: sorter.join(','),
    })}`)
      .then(action(({ failed, list, total }) => {
        if (!failed) {
          this.projectTypeData = list;
          this.pagination = {
            ...pagination,
            total,
          };
        }
        this.loading = false;
      }))
      .catch(action((error) => {
        Choerodon.handleResponseError(error);
        this.loading = false;
      }));
  }
}

code: filters.code,
      enabled: filters.enabled,
      params: params.join(','),
      sort: sorter.join(','),
    })}`)
      .then(action(({ failed, content, totalElements }) => {
        if (!failed) {
          this.orgData = content;
          this.pagination = {
            ...pagination,
            total: totalElements,
          };
        }
        this.loading = false;
      }))
      .catch(action((error) => {
        Choerodon.handleResponseError(error);
        this.loading = false;
      }));
  }