У чему се састоји главна концепција Flux?

Основна концепција Flux-а је у правцу једносмерног тока података (unidirectional data flow). Стање апликације се чува на једном месту (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 {
  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 обезбеђује предвидљиво управљање стањем и олакшава дебаговање захваљујући јасном и контролисаном току података.