Какво е основната концепция на 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 осигурява предсказуемо управление на състоянието и улеснява отстраняването на грешки чрез явен и контролиран поток от данни.