How to use the mobx.transaction function in mobx

componentWillUnmount () {
    // Return all items that has not been checked out
    transaction(() => {
      this.cart.slice().forEach((item) => this.returnItem(item));
    });
    this.stopManagingDebt();
  }

@action('清空当前状态') clean() {
        transaction(() => {
            this.viewport.currentEditComponentMapUniqueKey = null
            this.viewport.currentHoverComponentMapUniqueKey = null
            this.viewport.currentDragComponentInfo = null
            this.viewport.showEditComponents = false
        })
    }

private handleMouseOver(e: React.MouseEvent): void {
		const { store } = this.props as { store: Store.ViewStore };
		const targetElement = utils.elementFromTarget(e.target as HTMLElement, {
			sibling: false,
			store
		});

		const targetContent = utils.elementContentFromTarget(e.target, { store });
		const item = utils.above(e.target, `[${C.ElementAnchors.item}]`);

		const isElementMouseOver = item && targetElement;
		const isContentMouseOver = item && targetContent;
		const isRootMouseOver =
			!item && targetElement && targetElement.getRole() === Types.ElementRole.Root;

		Mobx.transaction(() => {
			if (isElementMouseOver || isContentMouseOver || isRootMouseOver) {
				store.getProject().unsetHighlightedElement();
				store.getProject().unsetHighlightedElementContent();
			}

			if (
				item &&
				targetElement &&
				targetContent === targetElement.getContentBySlotId(Types.SlotType.Children)
			) {
				targetElement.setHighlighted(true);
			}

			if (item && targetContent && targetContent.getSlotType() === Types.SlotType.Children) {
				targetContent.setHighlighted(true);
			}

value: function horizontalMoveComponent(parentMapUniqueKey, beforeIndex, afterIndex) {
            var layoutChilds = this.viewport.components.get(parentMapUniqueKey).layoutChilds;
            if (beforeIndex < afterIndex) {
                mobx_1.transaction(function () {
                    for (var index = beforeIndex; index < afterIndex; index++) {
                        var beforeUniqueKey = layoutChilds[index];
                        var afterUniqueKey = layoutChilds[index + 1];
                        layoutChilds[index] = afterUniqueKey;
                        layoutChilds[index + 1] = beforeUniqueKey;
                    }
                });
            } else {
                mobx_1.transaction(function () {
                    for (var index = beforeIndex; index > afterIndex; index--) {
                        var beforeUniqueKey = layoutChilds[index];
                        var afterUniqueKey = layoutChilds[index - 1];
                        layoutChilds[index] = afterUniqueKey;
                        layoutChilds[index - 1] = beforeUniqueKey;
                    }
                });
            }
        }
    }, {

e.preventDefault();
			return;
		}

		if (draggedElement.getNameEditable()) {
			e.preventDefault();
			return;
		}

		if (this.dragImg.current) {
			e.dataTransfer.effectAllowed = 'move';
			e.dataTransfer.setData('text', JSON.stringify(draggedElement.toJSON()));
			e.dataTransfer.setDragImage(this.dragImg.current, 75, 15);
		}

		Mobx.transaction(() => {
			draggedElement.setDragged(true);
			store.setSelectedElement(draggedElement);
		});
	}

incrementCurrentElementIndexBy(num) {
    const slidesArray = this.slides;
    const currentChildren = slidesArray[this.currentSlideIndex].children;

    if (
      !this.currentElement ||
      num + this.currentElementIndex < 0 ||
      num + this.currentElementIndex >= currentChildren.length
    ) {
      return;
    }

    transaction(() => {
      const currentChild = currentChildren[this.currentElementIndex];
      const sibling = currentChildren[this.currentElementIndex + num];
      const newParagraphStyles = this.paragraphStyles;

      currentChildren[this.currentElementIndex] = sibling;
      currentChildren[this.currentElementIndex + num] = currentChild;

      this._addToHistory({
        paragraphStyles: newParagraphStyles,
        currentSlideIndex: this.currentSlideIndex,
        currentElementIndex: this.currentElementIndex + num,
        slides: slidesArray
      });
    });
  }

signOut() {
    localStorage.removeItem('react-portal-token');
    localStorage.removeItem('react-portal-name');
    transaction(() => {
      this.authenticated = false;
      this.name = '';
      this.errorMessage = '';
    });
    dispatch(tabbarCloseAll())
  }

setSelectedSlideIndex(newSlideIndex) {
    const snapshot = this.currentState;
    snapshot.currentElementIndex = null;
    snapshot.currentSlideIndex = newSlideIndex;

    transaction(() => {
      const left = this.history.slice(0, this.historyIndex);
      const right = this.history.slice(this.historyIndex + 1, this.history.length);
      this.history = left.concat([snapshot], right);
    });
  }

updateElementResizeState(isResizingElement, cursor = null) {
    transaction(() => {
      this.cursorType = cursor;
      this.isResizing = isResizingElement;
    });
  }

export function dispatch(actionMessage: ActionMessage) {
    if (getGlobalContext().inMutator) {
        throw new Error('Mutators cannot dispatch further actions.');
    }

    let dispatchWithMiddleware = getGlobalContext().dispatchWithMiddleware || finalDispatch;
    transaction(dispatchWithMiddleware.bind(null, actionMessage));
}