Ποια είναι η βασική ιδέα του Flux;

Η βασική ιδέα του Flux βασίζεται σε μια μονοκατευθυντική ροή δεδομένων. Η κατάσταση της εφαρμογής αποθηκεύεται σε ένα μέρος (Store), και οι αλλαγές σε αυτήν είναι δυνατές μόνο μέσω του Dispatcher, που επεξεργάζεται τις Actions.

Βασικά στοιχεία του Flux:

• Actions: Περιγράφουν τι συνέβη στην εφαρμογή (π.χ., "ο χρήστης πάτησε ένα κουμπί"). Περιέχουν τον τύπο της ενέργειας και το φορτίο (payload) με τα δεδομένα.
• Dispatcher: Το μόνο σημείο εισόδου για όλες τις Actions. Ανακατευθύνει τις Actions στο Store.
• Store: Περιέχει την κατάσταση ενός συγκεκριμένου μέρους της εφαρμογής και τη λογική για την αλλαγή της σε απάντηση στις Actions. Το Store εκπέμπει γεγονότα αλλαγής κατάστασης (Change Event).
• Views: Η διεπαφή χρήστη. Εμφανίζει την κατάσταση από το Store. Ανταποκρίνεται σε γεγονότα αλλαγής του Store και ενημερώνεται ανάλογα. Το View δεν αλλάζει άμεσα την κατάσταση, αλλά δημιουργεί Actions.

Ροή δεδομένων:

1. Ο χρήστης αλληλεπιδρά με το View.
2. Το View δημιουργεί μια Action.
3. Η Action αποστέλλεται στον Dispatcher.
4. Ο Dispatcher ανακατευθύνει την Action στο Store.
5. Το Store επεξεργάζεται την Action, αλλάζει την κατάσταση και εκπέμπει ένα Change Event.
6. Το View, που είναι εγγεγραμμένο στο Store, λαμβάνει το Change Event και ενημερώνεται, εμφανίζοντας την νέα κατάσταση.

// Παράδειγμα Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Παράδειγμα Dispatcher (απλοποιημένο)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Παράδειγμα Store (απλοποιημένο)
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;
      // άλλες περιπτώσεις
    }
  }
  getAll() {
    return this.todos;
  }
  // Μέθοδοι για εγγραφή και διαγραφή ακροατών
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Παράδειγμα View (απλοποιημένο)
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() {
    // Απόδοση της λίστας εργασιών και του πεδίου εισαγωγής
  }
}

Το Flux παρέχει προβλέψιμη διαχείριση της κατάστασης και διευκολύνει την αποσφαλμάτωση μέσω μιας ρητής και ελεγχόμενης ροής δεδομένων.