Quelle est la conception principale de Flux?

Le concept principal de Flux repose sur un flux de données unidirectionnel. L'état de l'application est stocké en un seul endroit (Store), et les modifications de cet état ne sont possibles que via le Dispatcher, qui traite les Actions.

Éléments clés de Flux:

• Actions: Décrivent ce qui s'est passé dans l'application (par exemple, "l'utilisateur a appuyé sur un bouton"). Contiennent le type d'action et la charge utile (payload) avec les données.
• Dispatcher: Le seul point d'entrée pour toutes les Actions. Redirige les Actions vers le Store.
• Store: Contient l'état d'une partie spécifique de l'application et la logique pour le modifier en réponse aux Actions. Le Store émet des événements de changement d'état (Change Event).
• Views: L'interface utilisateur. Affichent l'état du Store. Réagissent aux événements de changement du Store et se mettent à jour en conséquence. La View ne modifie pas directement l'état, mais crée des Actions.

Flux de données:

1. L'utilisateur interagit avec la View.
2. La View crée une Action.
3. L'Action est envoyée au Dispatcher.
4. Le Dispatcher redirige l'Action vers le Store.
5. Le Store traite l'Action, modifie son état et émet un Change Event.
6. La View, abonnée au Store, reçoit le Change Event et se met à jour, affichant le nouvel état.

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

// Exemple de Dispatcher (simplifié)
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }
  register(callback) {
    this.callbacks.push(callback);
  }
  dispatch(action) {
    this.callbacks.forEach(callback => callback(action));
  }
}

// Exemple de Store (simplifié)
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;
      // autres cas
    }
  }
  getAll() {
    return this.todos;
  }
  // Méthodes pour s'abonner et se désabonner des événements
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Exemple de View (simplifié)
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() {
    // Rendu de la liste de tâches et du champ de saisie
  }
}

Flux assure une gestion prévisible de l'état et facilite le débogage grâce à un flux de données explicite et contrôlé.