В чем заключается основная концепция Flux?

Основная концепция Flux заключается в однонаправленном потоке данных (unidirectional data flow). Состояние приложения хранится в одном месте (Store), и изменения этого состояния возможны только через Dispatcher, который обрабатывает Actions.

Ключевые элементы Flux:

• Actions: Описывают, что произошло в приложении (например, "пользователь нажал кнопку"). Содержат тип действия и полезную нагрузку (payload) с данными.
• Dispatcher: Единственная точка входа для всех Actions. Перенаправляет Actions в Store.
• Store: Содержит состояние определенной части приложения и логику его изменения в ответ на Actions. Store эмитирует события об изменении состояния (Change Event).
• Views: Представление пользовательского интерфейса. Отображают состояние из Store. Реагируют на события изменения Store и обновляются соответствующим образом. View не изменяют состояние напрямую, а создают Actions.

Поток данных:

1. Пользователь взаимодействует с View.
2. View создает Action.
3. Action отправляется в Dispatcher.
4. Dispatcher перенаправляет Action в Store.
5. Store обрабатывает Action, изменяет свое состояние и эмитирует Change Event.
6. View, подписанные на Store, получают Change Event и обновляются, отображая новое состояние.

// Пример Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Пример Dispatcher (упрощенный)
class Dispatcher {
  register(callback) {
    this.callbacks.push(callback);
  }

  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Пример Store (упрощенный)
class TodoStore {
  constructor(dispatcher) {
    this.todos = [];
    dispatcher.register(this.handleAction.bind(this));
  }

  handleAction(action) {
    switch (action.type) {
      case 'ADD_TODO':
        this.todos.push(action.payload.text);
        this.emitChange();
        break;
      // другие кейсы
    }
  }

  getAll() {
    return this.todos;
  }

  // Методы для подписки и отписки от событий
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Пример View (упрощенный)
class TodoList extends React.Component {
  componentDidMount() {
    this.store.addChangeListener(this.updateState);
  }

  componentWillUnmount() {
    this.store.removeChangeListener(this.updateState);
  }

  updateState() {
    this.setState({ todos: this.store.getAll() });
  }

  handleAddTodo(text) {
    this.dispatcher.dispatch(addTodoAction(text));
  }

  render() {
    // Отрисовка списка задач и поля ввода
  }
}

Flux обеспечивает предсказуемое управление состоянием и упрощает отладку за счет явного и контролируемого потока данных.