Flux'un temel kavramı nedir?

Flux'un temel kavramı, tek yönlü veri akışına dayanır. Uygulamanın durumu tek bir yerde (Store) saklanır ve bu durumdaki değişiklikler yalnızca Dispatcher aracılığıyla, Actions işlenerek yapılabilir.

Flux'un ana unsurları:

• Actions: Uygulamada ne olduğunu açıklar (örneğin, "kullanıcı bir düğmeye bastı"). Eylem türü ve veri yükü (payload) içerir.
• Dispatcher: Tüm Actions için tek giriş noktasıdır. Actions'ı Store'a yönlendirir.
• Store: Uygulamanın belirli bir bölümünün durumunu ve bu durumu Actions'a yanıt olarak değiştirme mantığını içerir. Store, durum değişikliklerini (Change Event) bildiren olaylar yayar.
• Views: Kullanıcı arayüzü. Store'daki durumu gösterir. Store'daki değişiklik olaylarına yanıt verir ve buna göre güncellenir. View, durumu doğrudan değiştirmez, bunun yerine Actions oluşturur.

Veri akışı:

1. Kullanıcı View ile etkileşime girer.
2. View bir Action oluşturur.
3. Action Dispatcher'a gönderilir.
4. Dispatcher, Action'ı Store'a yönlendirir.
5. Store, Action'ı işler, durumunu değiştirir ve Change Event yayar.
6. Store'a abone olan View, Change Event'i alır ve yeni durumu göstererek güncellenir.

// Örnek Action
const addTodoAction = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text: text
  }
});

// Örnek Dispatcher (basitleştirilmiş)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Örnek Store (basitleştirilmiş)
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;
      // diğer durumlar
    }
  }
  getAll() {
    return this.todos;
  }
  // Olaylara abone olma ve abonelikten çıkma metodları
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Örnek View (basitleştirilmiş)
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() {
    // Görev listesini ve giriş alanını render et
  }
}

Flux, öngörülebilir durum yönetimi sağlar ve açık ve kontrol edilen veri akışı sayesinde hata ayıklamayı kolaylaştırır.