Education Ecosystem Blog

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, 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:

Var AppDispatcher = new Dispatcher();

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

<button onClick={ this.createNewItem }>Add Item</button>

Em seguida, a Action precisa ser definida:

addNewItem: function( evt ) {

              AppDispatcher.dispatch({

                  actionName: ‘add-item’,

                  addItem: } name: ‘5w-30 oil’ }

              });

          }

O Store também precisa ser definido:

Var ListStore = {

Items: [ ]

};

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

Var ListStore = ..

          AppDispatcher.register( function( payload ) {

              switch ( payload.actionName ) {

                  Case ‘add-item’:

                  ListStore.items.push( payload.addItem );

                  break;

              }

          });

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.