---
sidebar_position: 7
---

# 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.
- Для приложений с большим количеством реактивных данных.