Mis on Fluxi peamine kontseptsioon?

Fluxi põhikonseptsioon on ühesuunaline andmevoog (unidirectional data flow). Rakenduse olek hoitakse ühes kohas (Store), ja selle muutmine on võimalik ainult Dispatcheri kaudu, mis töötleb Actions.

Fluxi põhielemendid:

• Actions: Kirjeldavad, mis rakenduses juhtus (näiteks "kasutaja vajutas nuppu"). Nad sisaldavad tegevuse tüüpi ja laadimist (payload) andmetega.
• Dispatcher: Ains sissepääsupunkt kõigile Actionidele. Suunab Actionid Store'ile.
• Store: Hoidma kindla osa rakenduse olekust ja selle muutmise loogikat, vastates Actionidele. Store emiteerib sündmusi oleku muutusest (Change Event).
• Views: Kasutajaliidese esitlus. Näitab Store'ist saadud olekut. Reageerib Store'i muutustele ja uuendatakse vastavalt. View ei muuda otse olekut, vaid loob Actione.

Andmevoog:

1. Kasutaja suhtleb View'ga.
2. View loob Actioni.
3. Action saadetakse Dispatcherile.
4. Dispatcher suunab Actioni Store'ile.
5. Store töötleb Actioni, muudab oma olekut ja emiteerib Change Eventi.
6. View, mis on Store'ile registreeritud, saab Change Eventi ja uuendatakse, näidates uut olekut.

// Näide Actionist
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Näide Dispatcherist (lihtsustatud)
class Dispatcher {
  register(callback) {
    this.callbacks.push(callback);
  }

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

// Näide Store'ist (lihtsustatud)
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;
      // muud juhtumid
    }
  }

  getAll() {
    return this.todos;
  }

  // Meetodid tellimiseks ja eemaldamiseks
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Näide View'ist (lihtsustatud)
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() {
    // Näidata ülesannete nimekiri ja sisendväli
  }
}

Flux tagab prognoositava oleku haldamise ja lihtsustab silumist, kuna andmevoog on selge ja kontrollitav.