ReactJS avançado: práticas recomendadas para React + Redux + Sagas

café para o pensamento

Primeiras coisas primeiro, uma introdução rápida sobre o que é React. É uma biblioteca JavaScript usada para criar interfaces de usuário. Ele mudou o cenário de desenvolvimento front-end desde que foi lançado. Portanto, se você deseja ser um desenvolvedor front-end de aprendizado de bibliotecas como o React ou o Vue.js, é quase essencial na indústria de hoje. Aqui está um ótimo tutorial, se você está apenas começando a aprender o React. https://reactjs.org/tutorial/tutorial.html.

Lembro-me de quando comecei a aprender o React. Eu sempre tive a sensação ansiosa de que nunca poderia aprender tudo o que precisava, a constante mudança da linguagem JavaScript pairando sobre minha cabeça e, se alguma vez conseguisse algo certo, sempre acabaria me perguntando, se realmente era a melhor maneira? fazer isso? Depois de literalmente centenas de tutoriais on-line, pesquisas no YouTube e xícaras de café inacabadas (e provavelmente não lavadas), finalmente tive uma compreensão firme do que o React tenta trazer para a tabela JavaScript.

No entanto, sempre lutei para encontrar um tutorial que agrupe todos os conceitos avançados do React em um tutorial compacto.

Além disso, lembro-me de ter dificuldade em entender esses conceitos quando eles eram usados ​​em um grande código-fonte. Essa é a lacuna que este artigo está tentando preencher. Ferramentas e conceitos avançados estão incorporados ao nosso aplicativo simples. Isso é apenas para fins de tutorial e você não deve usar esses conceitos se o aplicativo não precisar deles.

Chega de conversa fiada. Vamos falar de código. Faça o download do código finalizado neste repositório e siga o README para que você possa ver e sentir o que vamos construir aqui. https://github.com/jelorivera08/react-starter-pack.

Página de destino do aplicativo

Acima, você pode ver o estado da contagem exibido e quatro botões que acionam suas respectivas ações. Suas ações são auto-explicativas.

seletores

Vá para o arquivo selectors.js no contêiner Counter, o primeiro conceito avançado que estamos abordando aqui é o createSelector. Observando o código, primeiro, a variável const count busca o estado de contagem dentro da árvore de estados do redux usando state.get ('count').

Em seguida, criamos um seletor usando o método mencionado. Isso nos ajuda a formatar o estado / dados que recebemos da árvore de estado redux e, ao fazer isso, economizamos muito tempo ao codificar novas funções que lidam com a reestruturação do estado ou formatar o estado de destino toda vez que precisamos renderizar algo à frente -fim. Neste exemplo, não alterei o estado que recebi. Acabei de retornar o estado simples para fins de demonstração.

Em seguida, a função resultante será usada dentro do mapStateToProps e, com mapStateToProps, naturalmente, a próxima coisa a configurar é mapDispatchToProps.

criar ações

Sempre que despachar ações do redutor, sempre temos que declarar seu tipo e a caixa de comutação correspondente para um redutor que ele entrará mais tarde para alterar o estado do aplicativo. Com o pacote createActions do reduxsauce, podemos atingir dois coelhos com uma cajadada só. Também devemos formatar o redutor com reduxsauce para nos beneficiarmos totalmente deste pacote.

redutor

Acima está o redutor do nosso aplicativo. O estado inicial é delimitado pela API fromJS de imutável e, como o nome do pacote se aplica, ele protege o estado inicial de ser mutado. Reagir é muito rigoroso com esse conceito, portanto, lembre-se sempre disso. a API createReducer do reduxsauce possui dois argumentos.

Primeiro, o estado inicial. Segundo, o objeto que possui chaves para tipos e valores de ação como uma função que o redutor acionará quando um tipo corresponder a uma chamada de despacho. Mesclar, então, altera a árvore de estado redux de acordo. Não existe um aplicativo da vida real que não saiba lidar com chamadas de API assíncronas, certo? Direito.

saga redux

Aqui está a parte da saga do nosso programa. Tudo é o mesmo, exceto pelo modo como chamamos nossas ações. Utilizamos a ação de tipo que criamos anteriormente e as utilizamos em nossa saga de observadores para despachar chamadas assíncronas que mais tarde afetarão nossa árvore de estado de redux.

O atraso está aí para simular a latência da rede, para uma sensação assíncrona muito melhor do aplicativo. Ah, e, por último, certifique-se de que não esquecemos o desempenho.

divisão de código

A divisão de código é uma ótima maneira de melhorar o desempenho de aplicativos da web. O código JavaScript é o mais prejudicial para os dados de um usuário. Lembre-se de que, com a divisão de código, ele permite que o usuário final faça o download apenas da parte do código necessária para obter eficiência no consumo de dados.

Em conclusão,

Existem muitos pacotes e ferramentas por aí que nos ajudam, os engenheiros de software criam um código mais limpo e muito mais eficiente. vem com um custo, o custo de entender o sistema subjacente e o que está pensando no React.

O Learning React exige que você mude seu paradigma de codificação para um muito mais diferente em comparação com a mentalidade anterior de codificação no front-end. As ferramentas e pacotes que discuti neste artigo resumem os princípios necessários para codificar de maneira bonita e eficiente no React, e é isso que torna um desenvolvedor excepcional.

São sempre as pequenas coisas.

Com isso, espero ter ajudado você a entender melhor o React com este pequeno artigo. Felicidades!