How to use mobservable

render() {
    return (
      <App header = {CheckboxesStore.header}
        items = {CheckboxesStore.items}
        changeItems = {(label, checked) => transaction(() => CheckboxesStore.items.forEach((itemChecked, itemLabel) => CheckboxesStore.items.get(itemLabel).checked = checked))}
        changeItem = {(label, checked) => CheckboxesStore.items.get(label).checked = checked}
      />
    );
  }

transaction(() => {
  if (this.selectedTask === task) {
   this.selectedTask = null;
  }

  this.arrows = this.arrows.filter(arrow => {
   return arrow.fromTask !== task && arrow.toTask !== task;
  });

  this.tasks.remove(task);
 })

constructor({ fromTask, toTask, id = uniqueId('arrow_') }) {
  invariant(fromTask instanceof Task && toTask instanceof Task,
       'Arrow requires `to` and `from` to be Task instances.');
  invariant(fromTask !== toTask,
       '`fromTask` and `toTask` in Arrow Model must be unique.');
  extendObservable(this, {
   fromTask,
   toTask
  });

  this.id = id;
 }

constructor() {
  extendObservable(this, {
   tasks: [],
   arrows: [],
   selectedTask: null,
   windowDimensions: this.getWindowDimesions()
  });

  window.addEventListener('resize', () => {
   this.windowDimensions = this.getWindowDimesions();
  }, false);
 }

createItem(label, checked = false) {
    this.items.set(label, new Item(label, checked));
  }

constructor({ x, y, name, id = uniqueId('task_') }) {
  const taskName = name ? name : id;
  extendObservable(this, {
   x,
   y,
   name: taskName
  });

  this.id = id;
 }