Сильнее боли. Андрей Буторин (первые 8 глав для ознакомления)
MobX - Singularis LabСсылки • • MobX: управление состоянием без...
Transcript of MobX - Singularis LabСсылки • • MobX: управление состоянием без...
![Page 1: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/1.jpg)
MobX
Шаповалов В.
![Page 2: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/2.jpg)
MobX
Simple, scalable state management
2
![Page 3: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/3.jpg)
Давайте разберёмся
3
![Page 4: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/4.jpg)
React
• State
• Props
4
![Page 5: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/5.jpg)
TODO list
App
TodoList
AddTodo
TodoItem
TodoItem
TodoItem
5
![Page 6: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/6.jpg)
State management?
• View
• URL
• Local storage
• Cookies
• …
6
![Page 7: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/7.jpg)
Состояние – это дерево
7
![Page 8: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/8.jpg)
Состояние – это живое дерево
8
![Page 9: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/9.jpg)
Как отслеживать изменения состояния?
9
![Page 10: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/10.jpg)
Ручная подписка на изменения
1. Используем текущее состояние
2. Подписываемся на изменения
3. Реагируем на изменения
10
![Page 11: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/11.jpg)
Ручная подписка на изменения
render(state);
state.on(‘change’, () => {
render(state);
});
11
![Page 12: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/12.jpg)
Проблемы ручной подписки
• Переподписка: отслеживание изменения всего дерева избыточно.
• Недоподписка: отслеживание отдельных полей в конце концов ведёт к неконсистентности.
12
![Page 13: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/13.jpg)
MobX
автоматическая _
MobX – автомагическая подписка
13
![Page 14: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/14.jpg)
Философия MobX
Anything that can be derived from the application state, should be derived. Automatically.
14
![Page 15: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/15.jpg)
Основные понятия
• Observable
• Computed
• Actions
• Reactions
15
![Page 16: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/16.jpg)
@observable
class Person {
...
@observable firstName = ‘Ivan’;
@observable lastName = ‘Ivanov’;
@observable nickName;
...
}
16
![Page 17: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/17.jpg)
@computed
class Person {
...
@computed get fullName() {
return this.firstName + ‘ ’ + this.lastName;
}
...
}
17
![Page 18: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/18.jpg)
@computed
Computed зависит от исходных данных и возвращает производные данные
18
![Page 19: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/19.jpg)
@action
class Person {
...
@action setNickName(nickName) {
this.nickName = nickName;
}
...
}
19
![Page 20: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/20.jpg)
Reactions
• Не возвращают результат
• Дают побочный эффект
20
![Page 21: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/21.jpg)
Reactions
Реакции срабатывают при каждом изменении исходных данных, от которых они зависят
21
![Page 22: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/22.jpg)
autorun
22
autorun(() => {
console.log(person.nickName || person.fullName);
});
![Page 23: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/23.jpg)
autorun
23
autorun(() => {
console.log(person.nickName || person.fullName);
});
![Page 24: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/24.jpg)
autorun
24
autorun(() => {
console.log(person.nickName || person.fullName);
});
![Page 25: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/25.jpg)
@computed
class Person {
...
@computed get fullName() {
return this.firstName + ‘ ’ + this.lastName;
}
...
}
25
![Page 26: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/26.jpg)
Наблюдаемые поля
> person.nickName
> person.fullName
> person.firstName
> person.lastName
26
![Page 27: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/27.jpg)
Дерево зависимостей
27
firstName
lastName
nickName
fullName
autorun
![Page 28: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/28.jpg)
Уведомление об изменении данных
28
person.setNickName(‘Aloha’);
![Page 29: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/29.jpg)
@action
class Person {
...
@action setNickName(nickName) {
this.nickName = nickName;
}
...
}
29
![Page 30: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/30.jpg)
autorun
30
autorun(() => {
console.log(person.nickName || person.fullName);
});
![Page 31: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/31.jpg)
autorun
31
autorun(() => {
console.log(person.nickName || person.fullName);
});
![Page 32: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/32.jpg)
Наблюдаемые поля
> person.nickName
Ненаблюдаемые поля
> person.fullName
> person.firstName
> person.lastName
32
![Page 33: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/33.jpg)
Дерево зависимостей
33
firstName
lastName
nickName
fullName
autorun
![Page 34: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/34.jpg)
autorun
Autorun при каждом выполнении заново собирает список зависимостей
34
![Page 35: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/35.jpg)
@observer
35
@observer
class ProfileView extends React.Component {
render() {
const person = { this.props };
if(person.nickName) {
return <div>{person.nickName}</div>;
}
return <div>{person.fullName}</div>;
}
}
![Page 36: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/36.jpg)
@observer
36
@observer
class SomeComponent extends React.Component {
render() {
if(!this.props.isEnabled) {
return null;
}
... много кода ...
}
}
![Page 37: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/37.jpg)
Динамическая подписка позволяет кардинально минимизировать количество перерисовок React-компонента
37
![Page 38: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/38.jpg)
Если React экономит нам операции с DOM, то MobX экономит нам операции с виртуальным DOM.
38
![Page 39: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/39.jpg)
Кэширование @computed
• Оно есть
• Кэширование происходит, пока есть хотя бы один подписчик
• Если подписчиков нет, кэш выкидывается, а @computedработает как обычный геттер
39
![Page 40: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/40.jpg)
MobX vs Redux
40
![Page 41: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/41.jpg)
Redux
• ООП -> функциональное программирование
• Модели -> immutable-структуры
• Методы -> экшены + редьюсеры
• Связи -> нормализация + селекторы
41
![Page 42: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/42.jpg)
MobX
• Минимум boilerplate
• Автоматическая подписка в рантайме
• Производительность из коробки
42
![Page 43: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/43.jpg)
Что ещё?
• DevTools
• mobx-utils
• mobx-state-tree
43
![Page 44: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/44.jpg)
Бонус
• React Context Api
44
![Page 45: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/45.jpg)
React Context API
• Обновлён в React 16.3
• Теперь открыт для использования (официально)
45
![Page 46: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/46.jpg)
React Context API
• React.createContext
• Provider
• Consumer
46
![Page 47: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/47.jpg)
React Context API
• Назначение – избавление от «props hell»
• Следует использовать, когда приложение ещё слишком мало, а прокидывать props уже надоело.
47
![Page 48: MobX - Singularis LabСсылки • • MobX: управление состоянием без боли • Redux ...](https://reader036.fdocuments.net/reader036/viewer/2022070905/5f73e3435352e242bb63f4d2/html5/thumbnails/48.jpg)
Ссылки
• https://mobx.js.org/
• MobX: управление состоянием без боли https://www.youtube.com/watch?v=yU_hJ2trMg4
• Redux против React Context API https://habr.com/ru/post/419449/
• Редакс в реальной жизни https://iamakulov.com/talks/redux-in-real-life/
48