React + Flux

Franzolin
SynchroTEC
Published in
2 min readOct 18, 2016

Se já conhece esta tecnologias vá para o Integrando as coisas.

Intro

React e Flux eram palavras que não faziam sentido pra mim há alguns meses atrás, mas depois de estudo, conversas. Algumas coisas passaram a fazer sentido e outras não. Segue uma brevíssima explicação

REACT é a biblioteca JavaScript usado pelo facebook para fazer interfaces FLUX é a arquitetura usada pelo facebook para fazer a parte do cliente das suas aplicações

De modo simples, para programador, o primeiro facilita deixar bonito e o segunda ficar funcional.

Integrando as coisas

Quando integramos React+Flux podemos fazer todo o front-end, o ponto principal do Flux, e que achei bastante interessante, é a ideia de usar a Lei de Demeter (exemplo: Você esta em uma fila com 500 pessoas, não precisa saber a posição de todas as pessoas, basta que saiba quem esta na sua frente. Porque se esta for atendida você será o próximo)

Assim o principal aspecto do Flux é que cada caixinha aí embaixo conhece muito pouco do lugar onde ela esta (quem vai definir isso é o programador porque não existe esta restrição na hora de implementar)

Fluxo de como o FLUX foi pensado

Assim sendo a parte do código que faz as requisições fica no Action Creators por dois motivos que são citados no site:

  1. Tirar assincronismos da dentro da store
  2. Melhorar a clareza e manutenção do código
  3. O Dispacher trabalha de maneira sincrona e o Action Creators pode trabalhar de modo assíncrono, assim sendo, a Store so receberá eventos em ordem.

Os front-ends que fiz até agora coloquei a camada de API apontando pra Store, então entendi bem o segundo ponto pois ao meu ver (um semi-leigo no assunto rsrs) faz muito mais sentido as requisições estarem no lugar sugerido pois a Store irá receber uma informação de sucesso ou falha e tratar como lhe for conveniente para posteriormente responder ao cliente.

Quanto aos outros dois pontos ainda estou aprendendo suas especificidades.

Segue um exemplo de implementação desta forma link

Post feito com ajuda de Lucas Katayama

--

--