Was ist das Hauptkonzept von Flux?

Das Hauptkonzept von Flux basiert auf einem unidirektionalen Datenfluss. Der Zustand der Anwendung wird an einem Ort (Store) gespeichert, und Änderungen an diesem Zustand sind nur über den Dispatcher möglich, der die Actions verarbeitet.

Schlüsselelemente von Flux:

• Actions: Beschreiben, was in der Anwendung passiert ist (z.B. "Benutzer hat auf eine Schaltfläche gedrückt"). Enthalten den Aktionstyp und die Nutzlast (Payload) mit den Daten.
• Dispatcher: Der einzige Eingangspunkt für alle Actions. Leitet die Actions an den Store weiter.
• Store: Enthält den Zustand eines bestimmten Teils der Anwendung und die Logik zu seiner Änderung als Reaktion auf Actions. Der Store emittiert Ereignisse bei Zustandsänderungen (Change Event).
• Views: Die Benutzeroberfläche. Zeigen den Zustand des Stores an. Reagieren auf Ereignisse des Stores und aktualisieren sich entsprechend. Die View ändert den Zustand nicht direkt, sondern erstellt Actions.

Datenfluss:

1. Der Benutzer interagiert mit der View.
2. Die View erstellt eine Action.
3. Die Action wird an den Dispatcher gesendet.
4. Der Dispatcher leitet die Action an den Store weiter.
5. Der Store verarbeitet die Action, ändert seinen Zustand und emittiert ein Change Event.
6. Die View, die auf den Store abonniert ist, erhält das Change Event und aktualisiert sich, um den neuen Zustand anzuzeigen.

// Beispiel für eine Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Beispiel für Dispatcher (vereinfachte Version)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Beispiel für Store (vereinfachte Version)
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;
      // andere Fälle
    }
  }
  getAll() {
    return this.todos;
  }
  // Methoden zum Abonnieren und Abbestellen von Ereignissen
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Beispiel für View (vereinfachte Version)
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() {
    // Rendern der Aufgabenliste und Eingabefeld
  }
}

Flux stellt eine vorhersehbare Zustandsverwaltung sicher und erleichtert das Debuggen durch einen expliziten und kontrollierten Datenfluss.