Как работает Flux?

Как работает Flux?

Flux — это архитектурный паттерн управления состоянием приложения, разработанный Facebook для решения проблем сложных приложений с множественными источниками данных. Хотя Flux сейчас вытеснен Redux и другими решениями, понимание его принципов остаётся важным для полного освоения управления состоянием.

Основные принципы Flux

Flux основан на идее однонаправленного потока данных. Это означает, что данные в приложении движутся в одном направлении, что делает поток изменений предсказуемым и легко отслеживаемым.

Архитектура Flux

Flux состоит из четырёх ключевых компонентов:

Action -> Dispatcher -> Store -> View
   ↑                              ↓
   └──────────────────────────────┘

1. Action — объект, описывающий событие, которое произошло в приложении:

const action = {
  type: "ADD_TODO",
  payload: {
    text: "Купить молоко",
    id: 1
  }
};

2. Dispatcher — центральный компонент, который получает actions и передаёт их в Store. Это служит "почтовым отделением" для всех действий:

const dispatcher = new Dispatcher();

// Регистрация callback для Store
dispatcher.register((action) => {
  switch(action.type) {
    case "ADD_TODO":
      todoStore.addTodo(action.payload);
      break;
    case "REMOVE_TODO":
      todoStore.removeTodo(action.payload.id);
      break;
  }
});

3. Store — объект, который содержит состояние приложения. Store слушает Dispatcher и обновляет своё состояние в ответ на actions:

class TodoStore {
  constructor() {
    this.todos = [];
    this.listeners = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
    this.notifyListeners();
  }

  removeTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
    this.notifyListeners();
  }

  getTodos() {
    return this.todos;
  }

  subscribe(listener) {
    this.listeners.push(listener);
  }

  notifyListeners() {
    this.listeners.forEach(listener => listener());
  }
}

4. View — React компоненты (или другие UI слои), которые читают данные из Store и отправляют Actions в ответ на пользовательские действия:

class TodoList extends React.Component {
  componentDidMount() {
    todoStore.subscribe(() => {
      this.setState({ todos: todoStore.getTodos() });
    });
  }

  handleAddTodo = (text) => {
    const action = {
      type: "ADD_TODO",
      payload: { text, id: Date.now() }
    };
    dispatcher.dispatch(action);
  };

  render() {
    return (
      <div>
        <button onClick={() => this.handleAddTodo("Новая задача")}>Добавить</button>
        <ul>
          {this.state.todos.map(todo => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Поток данных в Flux

1. User Interaction: Пользователь кликает на кнопку в компоненте
2. Action Created: Компонент создаёт action с типом и данными
3. Dispatch: Action отправляется в Dispatcher
4. Store Callback: Dispatcher вызывает зарегистрированный callback в Store
5. State Update: Store обновляет своё состояние
6. View Update: Store уведомляет подписчиков об изменении
7. Re-render: Компоненты перерисовываются с новыми данными

Преимущества Flux

• Предсказуемость: Однонаправленный поток данных легче отследить
• Отладка: Легко видеть, какие actions привели к какому состоянию
• Масштабируемость: Большие приложения становятся более управляемыми
• Разделение ответственности: Четкое разделение между Action, Store и View

Недостатки Flux

• Verbose: Требует много boilerplate кода
• Сложность: Для простых приложений может быть избыточным
• Multiple Stores: Управление несколькими Store может быть сложным

Эволюция: Redux

Redux, созданный Dan Abramov, упростил Flux, добавив одно глобальное хранилище (вместо нескольких Stores) и pure functions для обновления состояния:

// Redux reducer — чистая функция
function todoReducer(state = [], action) {
  switch(action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    case "REMOVE_TODO":
      return state.filter(todo => todo.id !== action.payload.id);
    default:
      return state;
  }
}

Заключение

Flux — это концептуальная основа, на которой построены многие современные решения управления состоянием. Хотя сегодня вы скорее всего будете использовать Redux, Zustand, Recoil или Context API, понимание принципов Flux поможет вам лучше разбираться в любом инструменте управления состоянием.