State Managers

1. Flux

Flux — это архитектурный подход (или паттерн), который используется для управления состоянием в приложениях React.js. Его создала команда Facebook как альтернативу более хаотичным способам управления состоянием и взаимосвязи компонентов. Flux помогает упрощать логику приложения, разделяя данные и управление ими от пользовательского интерфейса.

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

Flux основывается на однонаправленном потоке данных, что является ключевым преимуществом по сравнению с двухсторонним связыванием данных (two-way data binding). Основные элементы архитектуры Flux:

  1. Диспетчер (Dispatcher):

    • Центральный хаб, через который проходят все действия (actions) приложения.

    • Диспетчер отвечает за распространение действий к зарегистрированным хранилищам (Stores).

  2. Действия (Actions):

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

    • Представлены объектами с обязательным свойством type, которое указывает, что именно произошло. Дополнительно могут включать данные, связанные с этим событием.

    javascriptКопировать кодconst action = {
  type: 'ADD_TODO',
  payload: { id: 1, text: 'Learn Flux' }
};

  3. Хранилища (Stores):

    • Это объекты, которые хранят состояние приложения и логику для его изменения.

    • Хранилища подписаны на действия, передаваемые через диспетчер, и обновляют своё состояние в зависимости от типа действия.

    • В отличие от компонентов React, хранилища не имеют прямой связи с UI.

  4. Представления (Views):

    • Это компоненты React, которые отображают данные из хранилищ.

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

Как работает Flux (однонаправленный поток данных):

  1. Пользователь выполняет действие, например, нажимает кнопку.

  2. Это инициирует action, который отправляется в диспетчер.

  3. Диспетчер передаёт action в соответствующие хранилища.

  4. Хранилища обновляют своё состояние и уведомляют представления (views) об изменениях.

  5. Представления перерисовываются с обновлёнными данными.

Пример работы Flux:

javascriptКопировать код// Action
const addTodoAction = {
  type: 'ADD_TODO',
  payload: { id: 1, text: 'Learn Flux' }
};

// Dispatcher
const dispatcher = new Dispatcher();

dispatcher.register((action) => {
  if (action.type === 'ADD_TODO') {
    todoStore.addTodo(action.payload);
    todoStore.emitChange(); // Уведомление View
  }
});

// Store
const todoStore = {
  todos: [],
  addTodo(todo) {
    this.todos.push(todo);
  },
  getTodos() {
    return this.todos;
  },
  emitChange() {
    console.log('Store updated');
  }
};

// View (React Component)
class TodoList extends React.Component {
  componentDidMount() {
    todoStore.emitChange = this.forceUpdate.bind(this);
  }

  render() {
    const todos = todoStore.getTodos();
    return (
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    );
  }
}

Flux и Redux

Flux стал основой для Redux, который является более популярной библиотекой управления состоянием в приложениях React. Redux упрощает и формализует многие аспекты Flux:

  • В Redux вместо множества хранилищ используется одно глобальное хранилище.

  • Redux вводит концепции редьюсеров (reducers) для управления изменением состояния.

  • Redux более модульный и имеет богатую экосистему.

PreviousМодуль 4NextRedux

Last updated