Как управлять состоянием приложения JavaScript с MobX

Вы сделали это так далеко, так что вот тот же пример, построенный с React и MobX

Давайте создадим слайд-шоу

Как бы вы представили состояние слайд-шоу?
Начнем с отдельной фабрики слайдов:

 var slideModelFactory = function (text, active) {
  // id is not observable
  var slide = {
    id: _.uniqueId('slide_')
  };

  return mobx.extendObservable(slide, {
    // observable fields
    active: active || false,
    imageText: text,
    // computed
    get imageMain() {
      return 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + slide.imageText + '&w=350&h=150';
    },
    get imageThumb() {
      return 'https://placeholdit.imgix.net/~text?txtsize=22&txt=' + slide.imageText + '&w=400&h=50';
    }
  });
};

У нас должно быть что-то, что объединит все наши слайды. Давайте построим это сейчас:

 var slideShowModelFactory = function (slides) {
  return mobx.observable({
    // observable
    slides: _.map(slides, function (slide) {
      return slideModelFactory(slide.text, slide.active);
    }),
    // computed
    get activeSlide() {
      return _.find(this.slides, {
        active: true
      });
    }
  });
};

Слайд-шоу живет! Это более интересно, потому что у нас есть наблюдаемый массив слайдов, который позволит нам добавлять и удалять слайды из коллекции и соответственно обновлять наш интерфейс. Затем мы добавляем вычисленное значение activeSlide

Давайте сделаем наше слайд-шоу. Мы еще не готовы к выводу HTML, поэтому будем просто печатать на консоль.

 var slideShowModel = slideShowModelFactory([
  {
    text: 'Heloo!',
    active: true
  }, {
    text: 'Cool!'
  }, {
    text: 'MobX!'
  }
]);

// this will output our data to the console
mobx.autorun(function () {
  _.forEach(slideShowModel.slides, function(slide) {
    console.log(slide.imageText + ' active: ' + slide.active);
  });
});

// Console outputs:
// Heloo! active: true
// Cool! active: false
// MobX! active: false

Круто, у нас есть несколько слайдов, и autorun Давайте изменим слайд или два:

 slideShowModel.slides[1].imageText = 'Super cool!';
// Console outputs:
// Heloo! active: true
// Super cool! active: false
// MobX! active: false

Похоже, наш autorun Если вы измените что-нибудь, что смотрит autorun Давайте изменим наш выходной вывод из консоли на HTML:

 var $slideShowContainer = $('#slideShow');
mobx.autorun(function () {
  var html = '<div class="mainImage"><img src="' 
           + slideShowModel.activeSlide.imageMain 
           + '"/></div>';

  html += '<div id="slides">';
  _.forEach(slideShowModel.slides, function (slide) {
    html += '<div class="slide ' + (slide.active ? ' active' : '') 
         + '" data-slide-id="' + slide.id + '">';
    html += '<img src="' + slide.imageThumb + '"/>'
    html += '</div>';
  });
  html += '</div>';
  $slideShowContainer.html(html);
});

Теперь у нас есть основы этого слайд-шоу, однако интерактивности пока нет. Вы не можете нажать на миниатюру и изменить основное изображение. Но вы можете легко изменить текст изображения и добавить слайды с помощью консоли:

 // add a new slide
slideShowModel.slides.push(slideModelFactory('TEST'));
// change an existing slide's text
slideShowModel.slides[1].imageText = 'Super cool!';

Давайте создадим наше первое и единственное действие, чтобы установить выбранный слайд. Мы должны будем изменить slideShowModelFactory

 // action
setActiveSlide: mobx.action('set active slide', function (slideId) {
  // deactivate the current slide
  this.activeSlide.active = false;
  // set the next slide as active
  _.find(this.slides, {id: slideId}).active = true;
})

Зачем использовать action Отличный вопрос! Действия MobX не требуются, как я показал в других моих примерах по изменению наблюдаемых значений.

Действия помогут вам несколькими способами. Во-первых, все действия MobX выполняются в транзакциях. Это означает, что наш autorun Подумайте об этом на секунду. Что случилось бы, если бы я попытался деактивировать активный слайд и активировать следующий за пределами транзакции? Наш autorun Первый запуск был бы довольно неловким, так как не было бы активного слайда для отображения.

В дополнение к своей транзакционной природе действия MobX, как правило, упрощают отладку. Первым необязательным параметром, который я передал в свой mobx.action'set active slide' Эта строка может быть выведена с помощью API отладки MobX .

Итак, у нас есть действие, давайте подключим его использование с помощью jQuery:

 $slideShowContainer.on('click', '.slide', function () {
  slideShowModel.setActiveSlide($(this).data('slideId'));
});

Вот и все. Теперь вы можете нажимать на миниатюры, и активное состояние распространяется так, как вы ожидаете. Вот рабочий пример слайд-шоу: