Wat is het hoofdconcept van Flux?

De kernconcept van Flux is gebaseerd op een unidirectionele gegevensstroom. De toestand van de applicatie wordt op één plek opgeslagen (Store), en wijzigingen aan deze toestand zijn alleen mogelijk via de Dispatcher, die de Actions verwerkt.

Belangrijke elementen van Flux:

Actions: Beschrijven wat er in de applicatie is gebeurd (bijvoorbeeld "de gebruiker heeft op een knop gedrukt"). Ze bevatten het type actie en de payload met gegevens.
Dispatcher: Het enige toegangspunt voor alle Actions. Stuurt de Actions door naar de Store.
Store: Bevat de toestand van een bepaald deel van de applicatie en de logica om deze te wijzigen in reactie op Actions. De Store emitteert gebeurtenissen over toestandveranderingen (Change Event).
Views: De gebruikersinterface. Tonen de toestand van de Store. Reageren op gebeurtenissen van de Store en worden dienovereenkomstig bijgewerkt. De View wijzigt de toestand niet rechtstreeks, maar creëert Actions.

Datastroom:

De gebruiker interacteert met de View.
De View maakt een Action.
De Action wordt naar de Dispatcher gestuurd.
De Dispatcher stuurt de Action door naar de Store.
De Store verwerkt de Action, wijzigt zijn toestand en emitteert een Change Event.
De View, die op de Store is geabonneerd, ontvangt het Change Event en wordt bijgewerkt, waarbij de nieuwe toestand wordt weergegeven.

// Voorbeeld van Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Voorbeeld van Dispatcher (vereenvoudigd)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Voorbeeld van Store (vereenvoudigd)
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 gevallen
    }
  }
  getAll() {
    return this.todos;
  }
  // Methoden voor het abonneren op en afmelden van gebeurtenissen
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Voorbeeld van View (vereenvoudigd)
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() {
    // Render de takenlijst en invoerveld
  }
}

Flux zorgt voor voorspelbaar toestandbeheer en vereenvoudigt debugging door een expliciete en gecontroleerde gegevensstroom.