Qual è il concetto principale di Flux?

Il concetto principale di Flux si basa su un flusso di dati unidirezionale. Lo stato dell'applicazione viene memorizzato in un unico posto (Store), e le modifiche a questo stato sono possibili solo tramite il Dispatcher, che elabora le Actions.

Elementi chiave di Flux:

• Actions: Descrivono cosa è successo nell'applicazione (ad esempio, "l'utente ha premuto un pulsante"). Contengono il tipo di azione e il payload con i dati.
• Dispatcher: L'unico punto di ingresso per tutte le Actions. Reindirizza le Actions allo Store.
• Store: Contiene lo stato di una parte specifica dell'applicazione e la logica per modificarlo in risposta alle Actions. Lo Store emette eventi di cambiamento di stato (Change Event).
• Views: L'interfaccia utente. Mostrano lo stato dello Store. Rispondono agli eventi di cambiamento dello Store e si aggiornano di conseguenza. La View non modifica direttamente lo stato, ma crea Actions.

Flusso di dati:

1. L'utente interagisce con la View.
2. La View crea un'Action.
3. L'Action viene inviata al Dispatcher.
4. Il Dispatcher reindirizza l'Action allo Store.
5. Lo Store elabora l'Action, modifica il suo stato e emette un Change Event.
6. La View, iscritta allo Store, riceve il Change Event e si aggiorna, mostrando il nuovo stato.

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

// Esempio di Dispatcher (semplificato)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Esempio di Store (semplificato)
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;
      // altri casi
    }
  }
  getAll() {
    return this.todos;
  }
  // Metodi per iscriversi e disiscriversi dagli eventi
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Esempio di View (semplificato)
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() {
    // Rendering della lista di task e del campo di input
  }
}

Flux garantisce una gestione dello stato prevedibile e semplifica il debug grazie a un flusso di dati esplicito e controllato.