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:
- Expedidor
- Lojas
- 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
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.