Mi a Flux fő koncepciója?

A Flux fő koncepciója az egysíkú adatfolyamon alapul. Az alkalmazás állapota egy helyen (Store) van tárolva, és ennek az állapotnak a változtatása csak a Dispatcher-en keresztül lehetséges, amely az Actions-t kezeli.

A Flux kulcsfontosságú elemei:

• Actions: Leírják, mi történt az alkalmazásban (például, "a felhasználó megnyomott egy gombot"). Tartalmazzák az akció típusát és a payload-ot az adatokkal.
• Dispatcher: Az összes Action egyetlen belépési pontja. Átirányítja az Actions-t a Store-ba.
• Store: Tartalmazza egy adott részének az alkalmazásnak az állapotát és a logikát annak módosítására Actions hatására. A Store eseményeket (Change Event) bocsát ki az állapot változásáról.
• Views: A felhasználói felület. Megjelenítik a Store állapotát. Reagálnak a Store változás eseményeire, és ennek megfelelően frissülnek. A View nem módosítja közvetlenül az állapotot, hanem Actions-t hoz létre.

Adatfolyam:

1. A felhasználó interakcióba lép a View-val.
2. A View létrehoz egy Action-t.
3. Az Action-t elküldi a Dispatcher-nek.
4. A Dispatcher átirányítja az Action-t a Store-ba.
5. A Store feldolgozza az Action-t, módosítja az állapotát, és kiad egy Change Event-et.
6. A Store-hoz feliratkozott View megkapja a Change Event-et, és frissül, megjelenítve az új állapotot.

// Példa Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Példa Dispatcher (egyszerűsített)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Példa Store (egyszerűsített)
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;
      // más esetek
    }
  }
  getAll() {
    return this.todos;
  }
  // Eseményekhez való feliratkozás és leiratkozás
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Példa View (egyszerűsített)
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() {
    // A feladatok listájának és a bemeneti mezőnek a renderelése
  }
}

A Flux biztosítja az állapot előrejelezhetőségét és megkönnyíti a hibakeresést egy nyilvánvaló és kontrollált adatfolyam révén.