Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 05 Horas 04 Min 55 Seg Tempo restante da oferta: 05 04 55 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) # Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151422/ARQUITETURA-FLUX.png) Olá Web Developers! Você já deve ter ouvido falar na Arquitetura Flux. Ela está sendo cada vez mais requisitada no mercado. Mas por que? Será só mais uma modinha entre desenvolvedores ou realmente há um valor em trabalhar com Flux? Vamos ver melhor aqui neste post! ## Qual o problema a ser resolvido? Já faz um bom tempo que paramos de fazer aplicações criando views inteiras de uma só vez e começamos a pensar mais em componentização para permitir a melhor reutilização dos elementos de nossa interface. O problema começa no momento em que precisamos distribuir os dados da nossa aplicação para nossos componentes, ou então fazer com que os componentes enviem algum dado ou ação para que outro componente responda. ![](https://dkrn4sk0rn31v.cloudfront.net/2019/05/15140129/componentes-baguncados.png.png) Isso sem contar que cada componente pode guardar seus próprios dados. Caso um dado esteja presente em vários componentes diferentes você vai ter um certo trabalho para garantir que ele esteja sempre atualizado em todos os lugares, evitando inconsistências. Um exemplo simples: uma lista de produtos e um formulário de produtos. Ao selecionar um produto da lista ele é enviado ao formulário para você editar. Ao fazer a alteração é preciso garantir que o produto que está no formulário também seja atualizado na lista. Este é um exemplo simples, mas em sistemas mais complexos há a possibilidade de um mesmo dado estar presente em bem mais lugares. Conforme o sistema for crescendo isso vai dando mais trabalho, até chegar a um ponto em que alguém vai esquecer de arrumar algo em algum lugar ou fazer uma nova funcionalidade que só altera o dado em um lugar específico, deixando o sistema com problemas. ## Como resolver este problema? Para evitar o problema de dados espalhados por diferentes lugares e uma bagunça na comunicação entre componentes foi pensada a seguinte ideia: vamos colocar os dados da aplicação em um único lugar! Dessa maneira só precisamos alterar nossos dados em um único lugar, garantindo que todos os componentes da aplicação sempre estarão com o mesmo dado. Isso também resolve o problema de comunicação entre componentes. Se os componentes se comunicarem a partir de um lugar central, não importa a estrutura dos nossos componentes e nem da nossa View. ## Como é a Arquitetura Flux? [ ![React Native - Animações e Estilização](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Animações e Estilização Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-animacoes-e-estilizacao) A Arquitetura Flux, diferente do que muitos pensam, não é uma biblioteca. É apenas uma arquitetura, ou seja, ela indica como devemos estruturar nossa aplicação. Ela separa totalmente a View dos dados. Na parte da View estão os componentes. Eles sempre passam dados de pai para filho, fazendo um fluxo de dados unidirecional. Nunca que um filho pode influenciar no pai. Como a lógica e os dados não estão aqui, podemos alterar nossa View sem medo de estragar nossa aplicação. Já os dados e a lógica para modificar estes dados ficam todos centralizados no que chamamos de Store. Como ela está totalmente separada da View podemos criar toda a lógica da nossa aplicação sem encostar em uma única linha de HTML ou CSS. ![](https://dkrn4sk0rn31v.cloudfront.net/2019/05/15140130/componentes-com-store.png.png) ## Como o Flux funciona? Basicamente o dividimos em 3 partes: - Dispatcher - View - Store ![](https://dkrn4sk0rn31v.cloudfront.net/2019/05/15140129/arquitetura-do-flux.png.png) ### View Como vimos antes, a `View` é simplesmente os componentes visuais que são apresentados, ou seja, tudo o que aparece na tela para o usuário. Se tem algum formulário ou botão, HTML em geral, estamos falando da View. ### Store A `Store`, como também dito anteriormente, é onde ficam os nossos dados e lógica da aplicação. Então a `View` consome os dados presentes na `Store`. E é junto à `Store` que ficam as funções que alteram esses dados. Então na `Store` podemos ter, por exemplo, uma lista de produtos. A `View` recebe essa lista da `Store`. Caso a gente precise apagar um produto, essa função ficará junto à `Store`, nunca em algum componente. Quando a lista for alterada, a View será atualizada automaticamente nos pontos necessários. Essas funções que modificam dados não são acessíveis pela `View`, elas ficam limitadas à `Store`. ### Dispatcher Mas se não podemos executar funções dentro dos componentes, como indicar, por exemplo, que queremos apagar um produto da lista? É aí que entra o `Dispatcher`! Pense no `Dispatcher` como uma central de comunicação. Na `View` podemos indicar no clique de um botão: “Dispatcher, quero apagar esse produto aqui!”. Então o `Dispatcher` comunica à Store: “ei, apague este produto!”. A `Store` vai ter todos os dados (nesse caso, a lista de produtos), e também a lógica necessária para apagar o produto em questão. Lista alterada! Ao ter alguma alteração, a `Store` sempre emite um aviso dizendo que seus dados foram alterados. Assim, a `View` recebe os novos dados, e eles serão propagados por todos os seus componentes, os quais sabem exatamente o que e onde deve ser atualizado. Então o `Dispatcher` não possui nenhuma inteligência. Ele apenas repassa para a Store o que precisa ser feito. Se um componente chamar o `Dispatcher` para uma função que não existe na `Store` nada vai acontecer. [ ![Next.js - Desenvolvimento de APIs REST](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/next-js.svg) Curso Next.js - Desenvolvimento de APIs REST Conhecer o curso ](https://www.treinaweb.com.br/curso/nextjs-desenvolvimento-de-apis-rest) ### Actions Mas como garantir uma boa comunicação entre as necessidades da `View` e as funções da `Store`, já que o `Dispatcher` não tem inteligência? No nosso exemplo de tirar um dos produtos da lista, imagine a bagunça se um componente indica que quer “remover”, outro diz que quer “apagar” e outro “deletar”. Como saber com qual palavra a `Store` está trabalhando? Mesmo que a gente padronize, podemos acabar escrevendo errado sem querer. E quanto a Store: ela vai receber o produto inteiro e pegar o ID dele ou ela vai receber apenas o ID? Para solucionar este problema podemos adicionar aqui o que chamamos de `Actions`. Elas são simplesmente objetos que usamos para padronizar a comunicação entre `View` e `Dispatcher`. ## Conclusão A Arquitetura Flux simplifica muito na organização de nossas aplicações, além de ser ótima para sistemas que tendem a crescer muito, pois é facilmente escalonável. Também temos implementações do Flux que simplificam e nos dão ainda mais poder, mudando a sua experiência no modo de desenvolver sistemas. No começo pode parecer estranho e mais complicado de entender, mas garanto que se aprender do modo certo você vai considerar usar em seu próximo projeto. Para saber mais, confira nossos cursos de [Arquitetura Flux](https://www.treinaweb.com.br/curso/react-trabalhando-com-arquitetura-flux "Arquitetura Flux") e de [Redux e Redux-Saga](https://www.treinaweb.com.br/curso/react-redux-e-redux-saga "Redux e Redux-Saga"). - [ #Arquitetura de Software ](https://www.treinaweb.com.br/blog/tag/arquitetura-de-software) - [ #Flux ](https://www.treinaweb.com.br/blog/tag/flux) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27110853/REDUX-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ O que é Redux? ](https://www.treinaweb.com.br/blog/o-que-e-redux) Confira neste artigo o que é Redux. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/importancia-dos-testes-de-software-na-qualidade-do-sistema-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ Estrutura de pastas e arquivos com React ](https://www.treinaweb.com.br/blog/estrutura-de-pastas-e-arquivos-com-react) Aprenda a criar uma estrutura de pastas e arquivos com React para ter uma aplicação com fácil manutenção e escalável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ O que é Spring Framework? ](https://www.treinaweb.com.br/blog/o-que-e-spring-framework) Confira neste artigo o Spring framework: um ecossistema de desenvolvimento para facilitar a criação de aplicações Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/JULIA-1-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ O que é a Linguagem de Programação Julia? ](https://www.treinaweb.com.br/blog/o-que-e-a-linguagem-de-programacao-julia) Veja neste artigo o que é a Linguagem de Programação Julia. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/07/fluxo-de-autenticacao-baseado-em-jwt-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 5 anos atrás ## [ Fluxo de autenticação baseado em JWT ](https://www.treinaweb.com.br/blog/fluxo-de-autenticacao-baseado-em-jwt) Neste artigo iremos aprender de teórica como é o fluxo de autenticação baseado em JWT dentro de uma API REST. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/o-que-e-programacao-reativa-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ O que é programação reativa? ](https://www.treinaweb.com.br/blog/o-que-e-programacao-reativa) Confira neste artigo o que vem a ser programação reativa, um princípio de desenvolvimento de software que vem ganhando espaço entre os desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/17132411/middlewares-aspnet-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Compreendendo os middlewares no ASP.NET Core ](https://www.treinaweb.com.br/blog/compreendendo-os-middlewares-no-asp-net-core) Veja como os middlewares funcionam em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/06/27092256/kanban-3-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 9 anos atrás ## [ Princípios básicos do Kanban ](https://www.treinaweb.com.br/blog/principios-basicos-do-kanban) Conheça um pouco sobre os princípios básicos do Kanban. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Spring Boot - Trabalhando com Controllers ](https://www.treinaweb.com.br/blog/spring-boot-trabalhando-com-controllers) Veja nesse artigo como trabalhar com controllers em uma aplicação Spring Web MVC com Spring Boot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Estruturas condicionais e de repetição na Go ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-de-repeticao-na-go) Veremos nesse artigo sobre quais são e como podemos utilizar as estruturas condicionais e as estruturas de repetição na linguagem Go Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **05h 04min 55s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58