V čom spočíva hlavná koncepcia Flux?

Hlavná koncepcia Flux spočíva v jednosmernom toku dát (unidirectional data flow). Stav aplikácie je uložený na jednom mieste (Store) a zmeny tohto stavu sú možné iba prostredníctvom Dispatcher, ktorý spracováva Actions.

Kľúčové prvky Flux:

• Actions: Opisujú, čo sa stalo v aplikácii (napríklad "používateľ klikol na tlačidlo"). Obsahujú typ akcie a užitočnú záťaž (payload) s dátami.
• Dispatcher: Jediný vstupný bod pre všetky Actions. Presmerováva Actions do Store.
• Store: Obsahuje stav určitej časti aplikácie a logiku jeho zmeny ako reakciu na Actions. Store emituje udalosti o zmene stavu (Change Event).
• Views: Predstavujú používateľské rozhranie. Zobrazujú stav zo Store. Reagujú na udalosti zmeny Store a aktualizujú sa príslušne. View nemení stav priamo, ale vytvára Actions.

Tok dát:

1. Používateľ interaguje s View.
2. View vytvára Action.
3. Action sa odosiela do Dispatcher.
4. Dispatcher presmerováva Action do Store.
5. Store spracováva Action, mení svoje stav a emituje Change Event.
6. View, ktoré sú prihlásené k Store, dostávajú Change Event a aktualizujú sa, zobrazujúc nový stav.

// Príklad Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Príklad Dispatcher (zjednodušený)
class Dispatcher {
  register(callback) {
    this.callbacks.push(callback);
  }

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

// Príklad Store (zjednodušený)
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;
      // iné prípady
    }
  }

  getAll() {
    return this.todos;
  }

  // Metódy na odber a odhlásenie od udalostí
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Príklad View (zjednodušený)
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() {
    // Vykreslenie zoznamu úloh a poľa na zadanie
  }
}

Flux zabezpečuje predvídateľné riadenie stavu a uľahčuje ladenie vďaka jasnému a kontrolovanému toku dát.