Library. MobX

🧱 Суть

MobX – библиотека для управления состоянием приложения.

Она автоматически отслеживает изменения состояния и обновляет компоненты, которые используют эти данные.

📦 Проблема

1. Сложно управлять состоянием

При большом количестве компонентов состояние становится трудно поддерживать.

2. Лишний код React

Для простых сценариев приходится использовать useState, useEffect и следить за зависимостями.

✅ Решение

Использовать MobX для хранения состояния и автоматической реактивности.

💻 Код

Установка:

npm install mobx mobx-react-lite

Создание Store

import { makeAutoObservable } from 'mobx';
 
class CounterStore {
	count = 0;
	
	constructor() {
		makeAutoObservable(this);
	}
 
	increment() {
		this.count++;
	}
}
	
export const counterStore = new CounterStore();

Использование в React

import { observer } from 'mobx-react-lite';
import { counterStore } from './model/store';
 
export const Counter = observer(() => {
	return (
		<>
			<p>{counterStore.count}</p>
			<button onClick={() => counterStore.increment()}>
				+
			</button>
		</>
	);
});

Частые ошибки

• забыли обернуть компонент в observer
• изменяют состояние вне Store
• создают один большой Store вместо разделения по фичам

🎯 Вывод

• MobX автоматически обновляет UI при изменении состояния
• observer подписывает компонент на изменения
• бизнес-логику рекомендуется хранить внутри Store
• хорошо сочетается с FSD

🔗 Связано

• Library. MobX. Reaction
• React. Memo и useMemo
• React. UseEffect и первый рендер
• Laravel + React. Архитектура