V čem spočívá hlavní koncept Fluxu?

Hlavní koncept Flux spočívá v jednosměrném toku dat (unidirectional data flow). Stav aplikace je uložen na jednom místě (Store) a změny tohoto stavu jsou možné pouze prostřednictvím Dispatcheru, který zpracovává Actions.

Klíčové prvky Flux:

• Actions: Popisují, co se stalo v aplikaci (například "uživatel klikl na tlačítko"). Obsahují typ akce a užitečnou zátěž (payload) s daty.
• Dispatcher: Jediný vstupní bod pro všechny Actions. Přesměrovává Actions do Store.
• Store: Obsahuje stav určité části aplikace a logiku jeho změny v reakci na Actions. Store emituje události o změně stavu (Change Event).
• Views: Uživatelské rozhraní. Zobrazují stav ze Store. Reagují na události změny Store a odpovídajícím způsobem se aktualizují. View nemění stav přímo, ale vytvářejí Actions.

Tok dat:

1. Uživatel interaguje s View.
2. View vytváří Action.
3. Action je odeslána do Dispatcheru.
4. Dispatcher přesměruje Action do Store.
5. Store zpracovává Action, mění svůj stav a emituje Change Event.
6. View, které jsou přihlášeny k Store, obdrží Change Event a aktualizují se, zobrazujíc nový stav.

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

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

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

// Pří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;
      // další případy
    }
  }

  getAll() {
    return this.todos;
  }

  // Metody pro přihlášení a odhlášení od událostí
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Pří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() {
    // Vykreslení seznamu úkolů a pole pro zadání
  }
}

Flux zajišťuje předvídatelné řízení stavu a usnadňuje ladění díky explicitnímu a kontrolovanému toku dat.