Kuo pagrįsta Flux pagrindinė koncepcija?

Pagrindinė Flux koncepcija yra vienpusiškas duomenų srautas (unidirectional data flow). Programos būsena saugoma vienoje vietoje (Store), ir jos pokyčiai įmanomi tik per Dispatcher, kuris apdoroja Actions.

Pagrindiniai Flux elementai:

• Actions: Apibūdina, kas įvyko programoje (pavyzdžiui, "vartotojas paspaudė mygtuką"). Jie turi veiksmų tipą ir naudingą krūvį (payload) su duomenimis.
• Dispatcher: Vienintelė įėjimo taškas visiems Actions. Nukreipia Actions į Store.
• Store: Laiko tam tikros programos dalies būseną ir logiką jos keitimui, atsakydamas į Actions. Store išmeta įvykius apie būsenos pokyčius (Change Event).
• Views: Vartotojo sąsajos vaizdas. Rodo būseną iš Store. Reaguoja į Store pokyčius ir atnaujina save atitinkamai. View tiesiogiai nekeičia būsenos, o kuria Actions.

Duomenų srautas:

1. Vartotojas sąveikauja su View.
2. View sukuria Action.
3. Action siunčiama į Dispatcher.
4. Dispatcher nukreipia Action į Store.
5. Store apdoroja Action, keičia savo būseną ir išmeta Change Event.
6. View, užregistruotos prie Store, gauna Change Event ir atnaujina save, rodyti naują būseną.

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

// Pavyzdinis Dispatcher (supaprastintas)
class Dispatcher {
  register(callback) {
    this.callbacks.push(callback);
  }

  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Pavyzdinis Store (supaprastintas)
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;
      // kiti atvejai
    }
  }

  getAll() {
    return this.todos;
  }

  // Prenumeratos ir atšaukimo metodai
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Pavyzdinis View (supaprastintas)
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() {
    // Darbo sąrašo ir įvesties lauko atvaizdavimas
  }
}

Flux užtikrina prognozuojamą būsenos valdymą ir palengvina klaidų paiešką dėl aiškaus ir kontroliuojamo duomenų srauto.