Консепсияи асосии 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 таъмини идоракунии пешгӯии ҳолат ва осон кардани хатоҷудоӣ бо роҳи равиши равшан ва назоратшавандаи маълумотро таъмин мекунад.