Na czym polega główna koncepcja Flux?

Główna koncepcja Flux opiera się na jednokierunkowym przepływie danych. Stan aplikacji jest przechowywany w jednym miejscu (Store), a zmiany tego stanu są możliwe tylko przez Dispatcher, który obsługuje Actions.

Kluczowe elementy Flux:

• Actions: Opisują, co się wydarzyło w aplikacji (np. "użytkownik nacisnął przycisk"). Zawierają typ akcji i ładunek (payload) z danymi.
• Dispatcher: Jedyny punkt wejścia dla wszystkich Actions. Kieruje Actions do Store.
• Store: Zawiera stan określonej części aplikacji i logikę jego zmiany w odpowiedzi na Actions. Store emituje zdarzenia o zmianie stanu (Change Event).
• Views: Interfejs użytkownika. Wyświetlają stan z Store. Reagują na zdarzenia zmiany Store i są odpowiednio aktualizowane. View nie zmienia stanu bezpośrednio, lecz tworzy Actions.

Przepływ danych:

1. Użytkownik wchodzi w interakcję z View.
2. View tworzy Action.
3. Action jest wysyłana do Dispatcher.
4. Dispatcher przekierowuje Action do Store.
5. Store obsługuje Action, zmienia swój stan i emituje Change Event.
6. View, które jest subskrybowane na Store, otrzymuje Change Event i się aktualizuje, wyświetlając nowy stan.

// Przykład Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Przykład Dispatcher (uproszczony)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Przykład Store (uproszczony)
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;
      // inne przypadki
    }
  }
  getAll() {
    return this.todos;
  }
  // Metody do subskrypcji i odsubskrypcji od zdarzeń
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Przykład View (uproszczony)
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() {
    // Renderowanie listy zadań i pola wejściowego
  }
}

Flux zapewnia przewidywalne zarządzanie stanem i ułatwia debugowanie dzięki jawnemu i kontrolowanemu przepływowi danych.