Fluxтин негизги концепциясы эмнеде?

Flux негизги концепциясы — бул бир тараптуу маалымат агымы (unidirectional data flow). Колдонмо абалы бир жерге сакталат (Store), жана бул абалдын өзгөрүшү only Dispatcher аркылуу мүмкүн, ал Actions иштетилет.

Fluxтин негизги элементтери:

• Actions: Колдонмодо эмне болгонун сүрөттөйт (мисалы, "пайдаланучу баскычты баскан"). Алар түрү жана жүк (payload) менен маалыматтарды камтыйт.
• Dispatcher: Бардык Actions үчүн жалгыз кирүү чекити. Actionsти Storeга багыттайт.
• Store: Белгилүү бир бөлүктүн абалын жана анын өзгөрүш логикасын камтыйт. Store абалдын өзгөрүшүн (Change Event) чыгарат.
• Views: Колдонуучу интерфейсинин көрүнүшү. Storeдон алынган абалды көрсөтөт. Өзгөрүүлөргө реакция кылып, тиешелүү жаңыртылат. View түздөн-түз абалды өзгөртпөйт, Actions түзөт.

Маалымат агымы:

1. Колдонуучу View менен иштешет.
2. View Action түзөт.
3. Action Dispatcherге жөнөтүлөт.
4. Dispatcher Actionти Storeга багыттайт.
5. Store Actionти иштетип, өз абалын өзгөртүп, Change Event чыгарат.
6. 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 абалдын алдын ала белгиленген башкарылуусун камсыз кылат жана каталарды оңой табууга жардам берет, так жана көзөмөлдөнгөн маалымат агымы аркылуу.