Businesses

Coisas que você deveria saber sobre React Flux

coisas-que-voce-deveria-saber-sobre-react-flux

Não é o nome de um desenho japonês! O React Flux é, de fato, um poderoso conjunto de ferramentas para desenvolver e fornecer conteúdo web. O objetivo de um programador é fazer com que o usuário final tenha a melhor experiência possível e React Flux é perfeito para isso.

Ao fornecer conteúdo, há três áreas principais: O modelo tradicional é conhecido como Model-View-Controller ou apenas pelo acrônimo MVC. Neste quadro, as informações que o usuário procura são armazenadas no Model, que é entregue como um View. Qualquer interação com esses dados é tratada através do Controller. Isso configura um fluxo de trabalho bastante circular – o usuário visualiza o conteúdo, interage com ele, o que atualiza o Model que, em seguida, gera um novo View.

React é geralmente visto como o V da estrutura de programação MVC. Seu papel é manipular como o usuário vê, e na maioria dos casos é capaz de interagir com o conteúdo que está sendo entregue. React é, na realidade, uma biblioteca Javascript (.JSX), e cria, essencialmente, o que o usuário vê como o resultado final dos esforços do programador.

Ao fornecer ao usuário final a oportunidade de interagir com o conteúdo, o React gera novas visualizações. Como exemplo, se o usuário adiciona um item a uma lista de compras, React é a peça que permite que eles vejam essa alteração após atualizações mais profundas na programação.

É com a adição de Flux que este processo ganha um pouco mais de potência. Então, vamos conhecer mais um pouco sobre este processo e examinar algumas das peças importantes.

react-flux

React, como o nome diz, uma reação

Quando o usuário final faz algo com o conteúdo – como a compra mencionada acima – o controlador alimenta esta ação de volta para o servidor, que manipula o modelo, que atualiza a visualização via React. Entretanto, trabalhando com o recurso DOM virtual, este loop é um pouco distorcido. O uso do DOM virtual com o React significa, por exemplo, que o cliente pode alterar a cor do produto que está considerando sem recarregar todo o conteúdo da página. Todos os dados necessários já foram entregues, então a mudança é feita de forma mais rápida.

Flux dá um passo adiante substituindo os componentes M e C

Com o Flux, o processo segue um caminho Action-Dispatcher-Store-View, com o View ainda sendo processado por React. Ao usar o Flux, o React cria Actions que são tratadas pelo Dispatcher, permitindo que os Stores atualizem, o que alimenta novas informações para o View.

Assim, enquanto o processo essencial permanece o mesmo que com o modelo MVC – o usuário vê o conteúdo, interage com ele e então recebe novos conteúdos – o processo real é significativamente alterado.

React Flux torna o processo de programação mais linear em oposição à estrutura circular MVC

Para um motorista, o seguinte processo é bastante direto: Quando o acelerador é pressionado, o combustível é enviado para o motor, que, em seguida, manda mais energia para a transmissão, resultando no movimento do carro.

Esta mesma mentalidade se aplica ao React Flux. Embora o Flux em si possa ser bastante complexo, o objetivo é tornar o processo para o usuário final simples e linear.

Como com o funcionamento interno de um automóvel, React Flux pode ser dividido em componentes menores.

Como mencionado acima, os componentes são Action, Dispatcher, Store e View. Para seguir um fluxo padrão, podemos ver como um usuário final interage com o conteúdo em um site que lhe permite comprar uma lata de óleo de motor.

Uma vez que o usuário recebe sua primeira visão (via React), ele clica no item desejado. Esta é ainda uma ação bastante estática, então não há realmente nenhuma mudança real neste momento. O usuário gostou do item e o adiciona à sua lista de compras. Isso cria uma ação que o Dispatcher retransmite para a loja. O Dispatcher é essencialmente um policial de trânsito, apontando cada Action na direção certa. O Store é onde os dados são mantidos. O Store está atualizada agora, o que cria um novo evento de alteração que é enviado de volta para o usuário como um novo View – agora há uma seleção ao lado do item que ele quer comprar e o Store está ouvindo a próxima Action, talvez a compra de um funil.

Como isso tudo funciona em código?

Bem, pode ser assustador à primeira vista, mas há uma lógica definida.

Um programador talentoso pode criar esta lógica com o mínimo de passos possíveis, tornando o código mais estável, a experiência do cliente mais satisfatória e o empregador mais feliz enquanto faz o cheque de pagamento 😉

O exemplo a seguir é bastante simples:

Para começar, o Dispatcher deve ser definido:

E, em seguida, o Dispatcher precisa ser configurado para ouvir uma Action:

Em seguida, a Action precisa ser definida:

O Store também precisa ser definido:

Uma vez que o usuário cria a ação, o Dispatcher atualiza o a Store:

Agora, a Store sabe que o usuário quer a lata de óleo, mas o cliente não sabe ainda que a loja foi atualizada. E essa atualização, junto com a receita proveniente da compra, é a finalidade do trabalho do programador.

Então, qual é o próximo passo? Este artigo destina-se a ser uma introdução a alguns recursos que o framework React Flux pode fornecer. React Flux fornece um excelente conjunto de ferramentas para programadores novos e experientes e permite que o exemplo acima seja completado com apenas mais alguns passos.

Para escrever as últimas linhas deste código, você terá que estudar mais o assunto. Uma boa fonte de conhecimento é o Livecoding.tv, onde você pode assistir a programadores trabalhando ao vivo em seus projetos.

About author

About Author Dr. Michael Jurgen Garbade is the founder of LiveEdu.TV, Kyuda, Education Ecosystem. He is future Venture Capitalist, Future Politician and always on the lookout for the Next Big Challenge. Obtained Masters in business administration and physics, and a Ph.D. in finance with professional work experience in high-paced environments at Fortune 500 companies like Amazon and General Electric. Expertize: Python, PHP, Sencha Touch & C++, SEO, Finance, Strategy & E-commerce. He speaks English and German and has worked in the US, Europe, and Asia. At Education Ecosystem he is the CEO and runs business operations.
Related posts
BusinessesCareer Development

4 Unique Proven Tips for Finding Awesome Employees

Businesses

Getting Web Development Projects Right

Artificial IntelligenceBusinesses

CPU, GPU, FGPA, or DSP: Heterogeneous Computing Multiplies the Processing Power

BusinessesCoding Community

Achieving the Best QoE: Performance Libraries Accelerate Code Execution