Qual é a ideia principal do Flux?

O conceito principal do Flux baseia-se num fluxo de dados unidirecional. O estado da aplicação é armazenado num único local (Store), e as alterações nesse estado só são possíveis através do Dispatcher, que processa as Actions.

Elementos-chave do Flux:

• Actions: Descrevem o que aconteceu na aplicação (por exemplo, "o utilizador pressionou um botão"). Contêm o tipo de ação e a carga útil (payload) com os dados.
• Dispatcher: O único ponto de entrada para todas as Actions. Redireciona as Actions para o Store.
• Store: Contém o estado de uma parte específica da aplicação e a lógica para alterá-lo em resposta às Actions. O Store emite eventos de mudança de estado (Change Event).
• Views: A interface de utilizador. Mostram o estado do Store. Respondem a eventos de mudança do Store e atualizam-se em conformidade. A View não altera o estado diretamente, mas cria Actions.

Fluxo de dados:

1. O utilizador interage com a View.
2. A View cria uma Action.
3. A Action é enviada ao Dispatcher.
4. O Dispatcher redireciona a Action para o Store.
5. O Store processa a Action, altera o seu estado e emite um Change Event.
6. A View, subscrita ao Store, recebe o Change Event e atualiza-se, exibindo o novo estado.

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

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

// Exemplo de Store (simplificado)
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;
      // outros casos
    }
  }
  getAll() {
    return this.todos;
  }
  // Métodos para subscrição e desinscrição de eventos
  addChangeListener(callback) { /* ... */ }
  removeChangeListener(callback) { /* ... */ }
  emitChange() { /* ... */ }
}

// Exemplo de View (simplificado)
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() {
    // Renderizar a lista de tarefas e o campo de entrada
  }
}

O Flux garante uma gestão previsível do estado e facilita a depuração através de um fluxo de dados explícito e controlado.