MobX

Хороший? Плохой? Злой?

Проблема крупных React-приложений

1. Передача состояния через props
2. Смена state через callbacks

FLUX (Reflux, Redux, etc.)

Redux + ImmutableJS

1. "Predictable state container for JS app"
2. Много шаблонного кода
3. Сложен для понимания
4. Полный контроль
5. Споры с командой по оформлению
6. Нужно принимать много решений

MobX - решение?

1. "Simple scalable state manager"
2. Создана из реального проекта
3. Мало контроля
4. TypeScript
5. IE9+

1. Управляют состоянием приложения
2. Упрощают передачу данных между компонентами
3. Централизованная обработка данных в одном месте (не том, о котором вы подумали)
4. Не привязаны к фреймфорку

1. Реактивность
2. observable
3. computed values
4. reactions
5. transactions
6. actions

Реактивность

const user = {
    firstName: '',
    lastName: ''
};

function render() {
    document.getElementById('app').innerHTML = user.firstName + user.lastName;
}

// 1 вариант
user.firstName = 'Вася';
render();
user.firstName = 'Петя';
render();

// 2 вариант
user.setFirstName = function(newFirstName) {
    this.firstName = newFirstName;
    render();
};

// 3 вариант
const user = {
    firstName: '',
    lastName: '',
    set firstName(newFirstName) {
        this.firstName = newFirstName;
        render();
    }
};

// 4 вариант - реактивный
Увидим дальше

Observable

const observableUser = mobx.observable({
    firstName: '',
    lastName: ''
});

Через декораторы

Computed values

var upperCaseName = computed(() =>
    return user.firstName + user.lastName;
);

Через декораторы

Reactions

const user = {
    firstName: '',
    lastName: ''
};

autorun(() => {
    document.getElementById('app').innerHTML = 
        user.firstName + user.lastName;
});

user.firstName = 'Света';
user.lastName = 'Светина';

Сколько раз выполнится рендер?

Transactions

const user = {
    firstName: '',
    lastName: ''
};

autorun(() => {
    document.getElementById('app').innerHTML = 
        user.firstName + user.lastName;
});

mobx.transaction(() => {
    user.firstName = 'Света';
    user.lastName = 'Светина';
});

Менять хранилище отовсюду - плохая практика

Actions

// Путь нехорошего программиста
$('.element').on('click', () => {
    store.user.firstName = 'Катя-Катерина';
});

// Путь хорошего программиста
$('.element').on('click', () => {
      modifyUserFirstName('Катя-Катерина');
});

@action function modifyUserFirstName(newFirstName) {
    store.user.firstName = newFirstName;
}

// Еще лучше
const Store = {
    user: {
        firstName: '',
        @action modifyFirstName(newFirstName) {
            this.firstName = newFirstName;
        }
    }
}

$('.element').on('click', () => {
      Store.user.modifyFirstName('Катя-Катерина');
});

MobX DevTools

Что выбрать?

Еще и минусы есть??

1. Возврат к ООП
2. Проблемы с hot-reload
3. Нет timetravel
4. Логирование не такое хорошее как в Redux (по причине мутабельности)

Ссылки

https://mobx.js.org