React + mobx путь с нуля. Mobx + react, взгляд со стороны

Вообще туториалы типа "как настроить с нуля такую-то связку" не предполагают раскрытия вопроса "почему эту связку, а не конкурирующую".

MobX, RxJS и Redux являютя, по сути, различными идеями реализации реактивного программирования (pull, push и что-то там особое), каждое из которых дает свое преимущество и недостатки (а еще их часто между собой комбинируют).

MobX, в отличие от redux, больше подходит для построения MVVM архитектуры приложения и хорошо структуризированного ООП, когда redux стремится в функциональщину и нормальным сторам. За счет того, что он (mobx) скрывает в себе много кода по обновлению компонентов, инкапсулирует логику обновления компонентов в себе (в хорошем mobx приложении вы ни разу не должны прописывать shouldComponentUpdate), при этом перерисовывает только непосредственные зависимости в отличие от перерисовки всего View в редуксе, ускоряет и облегчает разработку, требует меньше оверхеда в виде постоянного создавания всевозможных action и reducer, а так же увеличивает отзывчивость страницы. В теории.

Я бы даже сказал так: в очень оторванной от действительности теории, покуда на практике красивый код из todo-mvc примера превращается в достаточно запутанный VM слой с геморроем при lazy-загрузке, постоянными лишними перерисовками, которые устанешь вычищать, а так же хитрыми костылями там, где он по какой-то причине предпочел работать не так, как тебе нужно. Зато на нем действительно получается изящная MVVM архитектура.

Если у вас бекенд отдает обычный JSON, то какая вам разница, что с ним происходит во фронтенде?

Что с MobX, что с Redux что с ванильным JS все одинаково. Загрузили данные, что-то обновили, отослали обратно.

Без разницы с чем использовать. Связка mobx+react (как и redux+react, та и вообще любой нормальный фронтенд не делает предположений о том, что на бэкенде). Более того, mobx+react и redux+react вообще с бэкендом не взаимодействуют, они хранят данные в переменных js, изменяют их и отображают изменения. Откуда данные берутся и куда отдаются вне их зоні ответственности.

А в чем печалька с формами? Захотел легкой жизни, добавил в проект redux-form. И тут началось. Выпилил. Вернулся к ручному труду. Собираюсь поделиться навыками, пока выписываю в блокнотик тезисы для заметки.

export default class FormStore extends ContextStore {
  @observable fields = asMap();
  @observable defaults = asMap();
  @observable errors = asMap();
...
  @action updateField = (field, value) => {
    this.fields.set(field, value);
  }
  getFields() {
    return this.fields.toJS();
  }

  getErrors() {
    return this.errors.toJS();
  }

    <TextField
      type="text"
      placeholder="First Name"
      name="firstName"
      value={props.fields.firstName}
      errorMessage={props.errors.firstName}
      onChange={props.updateField}
      isTransparent={false} />

Вот код, необходимый и достаточный для открытия меню:

class MenuStore {
  @observable show;

  constructor() {
    this.show = false;
  }

  toggleLeftPanel() {
    this.show = !this.show;
  }
}

Остальное — разметка и импорты. Что вы видите тут лишнего?

Ну, конструктор, в принципе, можно и убрать, тут согласен...

всё это вынес в служебный декоратор, сами компоненты о mobx ничего не знают и получают только чистый js

Привет! А можно попросить Вас это показать? Сам декоратор и пример его использования.