Mobx: How to handle pagination

[MovingGifts]

I have 10,000 movies in a db, which will be fetched in increments of 50 via actions. Given this store:

class MoviesStore {
@observable moviesList = [];

First time fetch populates moviesList with the first 50 movies via this.moviesList.replace(data); Second time fetch, should add the next 50 movies to moviesList but this.moviesList.push(data); doesn't work; however replacing works. Any idea how to get it to work as intended so it adds the second 50 movies to the first 50 movies in the array?

[hellectronic]

but this.moviesList.push(data); doesn't work;

Do you mean that the change is not observed?

[EmilTholin]

You can't use replace on arrays. You need to push each entry in data separately:

import {observable, autorun, transaction } from 'mobx';

const movieStore = observable({
  movieList: [1,2,3],
  displayList: function() {
    return this.movieList.join(', ');
  }
});

autorun(function() {
  console.log('movieList was changed', movieStore.displayList);
});

const data = [10, 11, 12];

transaction(function() {
  data.forEach(function(d) {
    movieStore.movieList.push(d);
  });
});

JS Bin

[mweststrate]

Note that you should use this.movieList.push(...data), push does not accept arrays (well, it will be added as single entry).

[MovingGifts]

Thank you all! @mweststrate ...data worked, I was only 3 dots away haha ;-)