update state, api, arch

docs/state-managers/07-mobx.md

@@ -2,4 +2,55 @@
 sidebar_position: 7
 ---
 
-# Mobx
+# Mobx
+
+**MobX** — это библиотека для управления состоянием в JavaScript-приложениях, включая React. Она использует концепцию **реактивного программирования**, чтобы автоматически отслеживать изменения состояния и обновлять компоненты, которые зависят от этого состояния. MobX известен своей простотой, минимальным количеством boilerplate-кода и высокой производительностью.
+
+## Основные концепции MobX:
+1. **Observable State (наблюдаемое состояние):**
+   - Состояние в MobX помечается как observable, что позволяет библиотеке автоматически отслеживать его изменения.
+2. **Actions (действия):**
+   - Действия — это функции, которые изменяют состояние. Они помечаются как action.
+3. **Computed Values (вычисляемые значения):**
+   - Это значения, которые автоматически вычисляются на основе observable-состояния. Они помечаются как computed.
+4. **Reactions (реакции):**
+   - Реакции — это функции, которые автоматически выполняются при изменении observable-состояния. Например, обновление UI в React-компонентах.
+5. **Автоматическая реактивность:**
+   - MobX автоматически отслеживает зависимости между observable-состоянием и компонентами, что делает код более декларативным.
+
+## Преимущества MobX:
+1. **Простота:**
+   - Минимальный boilerplate-код и интуитивно понятный API.
+2. **Реактивность:**
+   - Автоматическое отслеживание изменений и обновление компонентов.
+3. **Производительность:**
+   - MobX оптимизирует обновления, минимизируя лишние ререндеры.
+4. **Гибкость:**
+   - Подходит как для простых, так и для сложных сценариев управления состоянием.
+5. **Поддержка TypeScript:**
+   - MobX полностью поддерживает TypeScript.
+
+## Как использовать MobX в React?
+1. **Установка**
+   - Установите MobX и mobx-react-lite (или mobx-react для классовых компонентов)
+2. **Создание store**
+   - Создайте store с использованием MobX
+3. **Подключение store к React**
+   - Используйте observer из mobx-react-lite, чтобы сделать компонент реактивным:
+4. **Использование нескольких stores**
+   - Если у вас несколько stores, можно использовать React Context для их передачи
+
+MobX легко работает с асинхронными операциями. Например, можно добавить загрузку данных.
+
+## Недостатки MobX:
+1. **Меньше структурированности:**
+   - В отличие от Redux, MobX не навязывает строгую структуру, что может привести к неорганизованному коду.
+2. **Меньше инструментов для отладки:**
+   - Хотя MobX имеет DevTools, они менее мощные, чем Redux DevTools.
+3. **Кривая обучения:**
+   - Некоторые концепции (например, реакции) могут быть сложными для новичков.
+
+## Когда использовать MobX?
+- Для небольших и средних приложений, где требуется простое и эффективное управление состоянием.
+- Если вы хотите избежать boilerplate-кода, характерного для Redux.
+- Для приложений с большим количеством реактивных данных.