Flux-un əsas konsepsiyası nədir?

Flux-un əsas konsepti məlumatların unidirectional axınına əsaslanır. Tətbiqin vəziyyəti tək bir yerdə (Store) saxlanılır və bu vəziyyətə dəyişikliklər yalnız Dispatcher vasitəsilə, Actions işlənərək mümkündür.

Flux-un əsas elementləri:

• Actions: Tətbiqdə baş verənləri təsvir edir (məsələn, "istifadəçi düyməyə basdı"). Tip və məlumat yükləməsini (payload) ehtiva edir.
• Dispatcher: Bütün Actions üçün yeganə giriş nöqtəsidir. Actions-ı Store-a yönəldir.
• Store: Tətbiqin müəyyən bir hissəsinin vəziyyətini və onu dəyişdirmək üçün məntiqi ehtiva edir. Store vəziyyət dəyişikliklərini (Change Event) bildirmək üçün hadisələr yayır.
• Views: İstifadəçi interfeysi. Store-dan vəziyyəti göstərir. Store-dəki dəyişiklik hadisələrinə cavab verir və müvafiq olaraq yenilənir. View vəziyyəti birbaşa dəyişdirmir, əvəzinə Actions yaradır.

Məlumat axını:

1. İstifadəçi View ilə qarşılıqlı əlaqədə olur.
2. View Action yaradır.
3. Action Dispatcher-ə göndərilir.
4. Dispatcher Action-ı Store-a yönəldir.
5. Store Action-ı işləyir, vəziyyətini dəyişir və Change Event yayır.
6. Store-ə abunə olan View Change Event-i alır və yenilənir, yeni vəziyyəti göstərir.

// Action nümunəsi
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Dispatcher nümunəsi (sadələşdirilmiş)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Store nümunəsi (sadələşdirilmiş)
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;
      // digər hallar
    }
  }
  getAll() {
    return this.todos;
  }
  // Hadisələrə abunə və çıxış metodları
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// View nümunəsi (sadələşdirilmiş)
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() {
    // Tapşırıqlar siyahısı və giriş sahəsinin göstərilməsi
  }
}

Flux vəziyyətin idarə olunmasını proqnozlaşdırıla bilən edir və açıq və nəzarət olunan məlumat axını sayəsində səhvlərin tapılmasını asanlaşdırır.