logo

Conceito de fluxo de reação

Flux é uma arquitetura de aplicativo que o Facebook usa internamente para construir o aplicativo web do lado do cliente com React. Não é uma biblioteca nem um framework. Não é uma biblioteca nem uma estrutura. É um tipo de arquitetura que complementa o React como visão e segue o conceito de modelo Unidirecional de Fluxo de Dados. É útil quando o projeto possui dados dinâmicos e precisamos mantê-los atualizados de forma eficaz. Reduz os erros de tempo de execução.

'Algoritmo de Kruskal'

Os aplicativos Flux têm três funções principais no tratamento de dados:

  1. Expedidor
  2. Lojas
  3. Visualizações (componentes React)

Aqui, você não deve ser confundido com o modelo Model-View-Controller (MVC). Embora existam controladores em ambos, mas as visualizações do controlador Flux (visualizações) são encontradas no topo da hierarquia. Ele recupera dados dos armazenamentos e depois os repassa para seus filhos. Além disso, criadores de ação - métodos auxiliares do despachante usados ​​para descrever todas as alterações possíveis no aplicativo. Pode ser útil como uma quarta parte do ciclo de atualização do Flux.

Estrutura e fluxo de dados

Conceito de fluxo de reação

Na aplicação Flux, os dados fluem em uma única direção (unidirecional). Este fluxo de dados é central para o padrão de fluxo. O despachante, os armazenamentos e as visualizações são nós independentes com entradas e saídas. As ações são objetos simples que contêm novos dados e propriedades de tipo. Agora, vejamos os vários componentes da arquitetura de fluxo, um por um.

Expedidor

É um hub central para o aplicativo React Flux e gerencia todo o fluxo de dados do seu aplicativo Flux. É um registro de retornos de chamada nas lojas. Não possui inteligência própria real e simplesmente atua como um mecanismo de distribuição das ações para as lojas. Todas as lojas se cadastram e fornecem um retorno de chamada. É um local que trata de todos os eventos que modificam a loja. Quando um criador de ação fornece uma nova ação ao despachante, todas as lojas recebem essa ação por meio de retornos de chamada no registro.

A API do despachante possui cinco métodos. Estes são:

15 de 100,00
SN Métodos Descrições
1. registro() É usado para registrar o retorno de chamada do manipulador de ações de uma loja.
2. cancelar registro() É usado para cancelar o registro do retorno de chamada de uma loja.
3. Esperar por() É usado para aguardar que o retorno de chamada especificado seja executado primeiro.
4. Despacho() É usado para despachar uma ação.
5. isDispatching() É usado para verificar se o despachante está despachando uma ação no momento.

Lojas

Ele contém principalmente o estado e a lógica do aplicativo. É semelhante ao modelo de um MVC tradicional. Ele é usado para manter um estado específico dentro do aplicativo, atualiza-se em resposta a uma ação e emite o evento change para alertar a visão do controlador.

Visualizações

Também é chamado de visualizações de controlador. Está localizado no topo da cadeia para armazenar a lógica para gerar ações e receber novos dados da loja. É um componente React que escuta eventos de mudança e recebe os dados dos armazenamentos e renderiza novamente o aplicativo.

amisha patel

Ações

O método dispatcher nos permite acionar um despacho para a loja e incluir uma carga útil de dados, que chamamos de ação. É um criador de ações ou métodos auxiliares que passam os dados para o despachante.

Vantagem do Fluxo

  • É um modelo de fluxo de dados unidirecional fácil de entender.
  • É de código aberto e mais um padrão de design do que uma estrutura formal como a arquitetura MVC.
  • A aplicação do fluxo é mais fácil de manter.
  • As peças de aplicação de fluxo são desacopladas.