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

Question

Flux — это архитектура для управления состоянием в приложениях. Данные попадают в стор (хранилище) так:Компонент вызывает действие (Action).Dispatcher получает действие и передаёт его всем сторам.Стор обновляет свои данные и оповещает компоненты.Компоненты перерисовываются с новыми данными.

YeaHub · Accepted Answer

Основные части FluxAction — объект с типом (type) и данными (payload), который описывает, что произошло (например, { type: 'ADD_TODO', text: '...' }).Dispatcher — центральный «диспетчер», который передаёт действие всем сторам.Store — хранилище данных (как state в Redux). Слушает действия и обновляется.View (React-компоненты) — отображает данные из стора и запускает действия.Как данные попадают в стор?Пользователь кликает кнопку в компоненте:Компонент вызывает action creator:function addTodo(text) { AppDispatcher.dispatch({ type: 'ADD_TODO', text: text }); }Dispatcher отправляет действие всем сторам:// Пример стора (TodoStore) TodoStore.dispatchToken = AppDispatcher.register(action => { switch (action.type) { case 'ADD_TODO': _todos.push({ text: action.text, completed: false }); TodoStore.emitChange(); // Оповещаем компоненты break; } });Компоненты подписаны на изменения стора и обновляются: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.Стор обновляется только через действия, что делает код предсказуемым.