Расскажи про Flux, как данные в стор попадают

Основные части Flux

1. Action — объект с типом (type) и данными (payload), который описывает, что произошло (например, { type: 'ADD_TODO', text: '...' }).

2. Dispatcher — центральный «диспетчер», который передаёт действие всем сторам.

3. Store — хранилище данных (как state в Redux). Слушает действия и обновляется.

4. View (React-компоненты) — отображает данные из стора и запускает действия.

Как данные попадают в стор?

1. Пользователь кликает кнопку в компоненте:

   <button onClick={() => addTodo('Купить молоко')}>Добавить</button>

2. Компонент вызывает action creator:

   function addTodo(text) {
   	AppDispatcher.dispatch({
   		type: 'ADD_TODO',
   		text: text
   	});
   }

3. Dispatcher отправляет действие всем сторам:

   // Пример стора (TodoStore)
   TodoStore.dispatchToken = AppDispatcher.register(action => {
   	switch (action.type) {
   		case 'ADD_TODO':
   			_todos.push({ text: action.text, completed: false });
   			TodoStore.emitChange(); // Оповещаем компоненты
   			break;
   	}
   });

4. Компоненты подписаны на изменения стора и обновляются:

   TodoStore.addChangeListener(this._onChange);

Flux vs Redux

• В Redux один стор, а в Flux — несколько.

• В Redux нет Dispatcher, его заменяет редюсер (reducer).

• Flux проще для маленьких приложений, Redux — для сложных.

Пример Flux-архитектуры

// Dispatcher
const AppDispatcher = new Flux.Dispatcher();
// Store
const TodoStore = {
	_todos: [],
	emitChange() { /* Оповещение компонентов */ },
	addChangeListener(callback) { /* Подписка */ }
};
// Action
function addTodo(text) {
	AppDispatcher.dispatch({ type: 'ADD_TODO', text });
}

• key в React должны быть стабильными — рандомные значения ломают логику обновлений.

• Flux — это однонаправленный поток данных: Action → Dispatcher → Store → View.

• Стор обновляется только через действия, что делает код предсказуемым.