Restricting mobx store to save only 1 item in an array

Question

I am trying to create a timed buffer that only stores 1 item in a mobx observable. I call a function in store that creates a timer so that no other item can be saved in the store until the timer is complete. However the observable seems to be overriding this, if thats even possible.

I am attempting 2 things ( The timed buffer, The array size restrictor )

Do observables override the standard javascript array methods/functions?

On the output of the observable in React I see a huge array and not restricted to length of 1.

addTourList(node);

Here is my store.js mobx class.

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;

score 1 · Accepted Answer · answered Jan 25 '20 at 11:33

Do observables override the standard javascript array methods/functions?

They don't, they just extends functionality to the point where you can use observable values. There're also some gotchas you might come across, especially if you're using Mobx 4.x(docs).

On the output of the observable in React I see a huge array and not restricted to length of 1

You must be using Mobx 4.x if see it. It's normal behavior, in reality, if you check array length, it'll be set to real number of elements in the array so no need to worry. Or just update to Mobx 5.x version which uses Proxy interface, so you'll see your arrays as is.

As an example, you can block any mutations to tourList variable by calling blockTourListMutationFor function at any time, to set time for how many milliseconds you want to prevent any mutations of this variable.

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);

I hope you find this answer useful :)

Restricting mobx store to save only 1 item in an array

1 Answers1