Care este conceptul principal al Flux?

Conceptul principal al Flux constă într-un flux de date unidirecțional. Starea aplicației este stocată într-un singur loc (Store), iar modificările acestei stări sunt posibile doar prin intermediul Dispatcher-ului, care procesează Actions.

Elemente cheie ale Flux:

• Actions: Descriu ce s-a întâmplat în aplicație (de exemplu, "utilizatorul a apăsat un buton"). Conțin tipul acțiunii și încărcătura utilă (payload) cu datele.
• Dispatcher: Singurul punct de intrare pentru toate Actions. Redirecționează Actions către Store.
• Store: Conține starea unei părți specifice a aplicației și logica pentru a o modifica ca răspuns la Actions. Store emite evenimente despre schimbarea stării (Change Event).
• Views: Interfața utilizatorului. Afișează starea din Store. Răspund la evenimentele de schimbare ale Store și se actualizează corespunzător. View nu modifică starea direct, ci creează Actions.

Fluxul de date:

1. Utilizatorul interacționează cu View.
2. View creează o Action.
3. Action este trimisă către Dispatcher.
4. Dispatcher redirecționează Action către Store.
5. Store procesează Action, își schimbă starea și emite un Change Event.
6. View, abonată la Store, primește Change Event și se actualizează, afișând noua stare.

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

// Exemplu de Dispatcher (simplificat)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Exemplu de Store (simplificat)
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;
      // alte cazuri
    }
  }
  getAll() {
    return this.todos;
  }
  // Metode pentru abonare și dezabonare la evenimente
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Exemplu de View (simplificat)
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() {
    // Afișarea listei de sarcini și a câmpului de intrare
  }
}

Flux asigură o gestionare previzibilă a stării și facilitează depanarea printr-un flux de date explicit și controlat.