Ограничение хранилища mobx для сохранения только 1 элемента в массиве

Question

Я пытаюсь создать временный буфер, который хранит только 1 элемент в наблюдаемой мобхе. Я вызываю функцию в магазине, которая создает таймер, так что никакой другой элемент не может быть сохранен в магазине, пока таймер не будет завершен. Однако наблюдаемая, кажется, переопределяет это, если это даже возможно.

Я пытаюсь сделать 2 вещи (синхронизированный буфер, ограничитель размера массива)

Заметим ли наблюдаемые значения переопределить стандартный массив javascript методы / функции?

На выходе наблюдаемого в React я вижу огромный массив, не ограниченный длиной 1.

addTourList(node);

Вот мой магазин. js класс mobx.

import { action, autorun, observable, computed, toJS } from 'mobx';
import { onError } from 'mobx-react';

class MainStore {

  @observable
  tourList = [];

  tourBuffer = null;

  addTourList(node) {

    if(node.loc == undefined){
      return false;
    }else{

      if(this.tourBuffer == null){
        this.buffer = function(){
          console.log('END TOUR BUFFER TIMER!');
          this.tourBuffer = null;
        }

        this.updateTourList(node)
        console.log('START TOUR BUFFER TIMER!');
        this.tourBuffer = setTimeout( this.buffer.bind(this), 4000);
      }else{
        console.log("TOUR ANIMATION BUSY");
      }
      return true;
    }
  }

  @action
  updateTourList(node) {
    var maxStoreData = 1;

    this.tourList.unshift(node);
    this.tourList.slice(0, maxStoreData);
  }
}

const store = (window.store = new MainStore());

onError(error => {
  console.log('STORE ERROR:', error);
});

export default store;

Answer 1

Заметили ли наблюдаемые переменные стандартные методы / функции javascript массива?

Они этого не делают, они просто расширяют функциональность до такой степени, что вы можете использовать наблюдаемые значения. Есть также некоторые ошибки, с которыми вы можете столкнуться, особенно если вы используете Mobx 4.x ( docs ).

На выходе наблюдаемого в React я вижу огромный массив, не ограниченный длиной 1

Вы должны использовать Mobx 4.x, если видите его. В действительности это нормальное поведение, если вы проверите длину массива, для него будет задано реальное количество элементов в массиве, поэтому не нужно беспокоиться. Или просто обновите до версии Mobx 5.x, которая использует интерфейс Proxy, чтобы вы видели ваши массивы как есть.

Например, вы можете заблокировать любые мутации в переменной tourList, вызывая функцию blockTourListMutationFor в любое время, чтобы установить время на сколько миллисекунд вы хотите предотвратить любые мутации этой переменной.

import { observable, action } from "mobx";

class MyStore {
  @observable tourList = [];
  isAllowedToMutateTourList = true;
  tourListTimeout;

  @action setTourList = val => {
    if (!this.isAllowedToMutateTourList) return;
    this.tourList = val;
  };

  blockTourListMutationFor = (timeout) => {
    this.isAllowedToMutateTourList = false;
    this.tourListTimeout = setTimeout(
      action(() => {
        this.isAllowedToMutateTourList = true;
      }),
      timeout
    );
  };
}

const store = new MyStore();
// will update tourList
store.setTourList([1]);
console.log(store);

store.blockTourListMutationFor(500);
// will not update tourList, bacause it's blocked for 500 ms
store.setTourList([1, 2]);
console.log(store);

setTimeout(() => {
  // will update tourList, because 500ms will pass by that time it executes
  store.setTourList([1, 2, 3]);
  console.log(store);
}, 1000);

Надеюсь, вы найдете этот ответ полезным:)