Como fazer a bola rolar com o Redux em dez minutos

Eduardo Vedes Blocked Unblock Seguir Seguindo 16 de dezembro de 2018 Foto de Kevin Ku no Unsplash

Oi todos ??

Por um tempo agora eu tenho ouvido meus amigos e colegas reclamando sobre como foi difícil entrar no Redux.

Eu corro um Grupo de Estudos freeCodeCamp no Sul de Portugal, Faro, então toda semana eu tento motivar e mentorear alguns colegas programadores que têm um monte de dificuldades tentando entrar na programação.

Dan Abramov criou um incrível curso de introdução ao Redux, que tive o prazer de ver em egghead.io , cobrindo todos os aspectos do Redux. Além disso, o site de documentação do Redux, aqui , é muito completo.

Mas, por alguma razão, muitas pessoas ainda não gritam o Redux.

O ponto é que o Redux tem uma curva de aprendizado considerável!

Você tem que entender muitas abstrações, você tem que fazer uma abordagem mais funcional para programar em JavaScript, conhecer muitos recursos do ES6 e também entender muito bem muitos conceitos de JavaScript, como a imutabilidade.

Então, é por isso que pode ser muito difícil para aqueles que começaram o React há alguns meses e estão muito entusiasmados em abstrair seu estado em uma loja Redux.

Você ouve o bate-papo em torno da máquina de café de como o Redux está agindo, sobre programação limpa, fontes únicas de verdade e os três princípios que impulsionam essa enorme biblioteca 'minúscula' (2kB) …

Então, não se preocupe, você veio ao lugar certo! Esse artigo é para você! E vou mostrar a você com uma primeira abordagem de princípio de aplicação como é fácil dar o pontapé inicial no Redux.

Muita tinta já foi derramada em torno deste assunto, mas vamos embora. Deixe-me tentar apresentá-lo o mais rápido possível ao Sr. Redux em um contexto de Reação.

Para começar com essa tarefa hercúlea, mostrarei como fazer um aplicativo de contagem muito simples com a seguinte história de usuário:

  1. exibir o número da contagem atual;
  2. fornecer ao usuário dois botões, para incrementar e decrementar o número de contagem.

Ok, neste ponto você pensa: eu poderia fazer isso muito rapidamente com o estado local.

História real! E é assim, companheiro! Vamos começar com um exemplo simples do React que usa o estado local e vamos transformar o aplicativo em um aplicativo React-Redux.

Mas, antes disso, deixe-me apresentar-lhe os conceitos básicos e objetivos do Redux em uma introdução rápida.

01. Conceitos Básicos

O Redux foi criado por Dan Abramov e é definido como um “contêiner de estado previsível para aplicativos JavaScript”.

A motivação para Dan criar o Redux foi que a complexidade do SPA estava aumentando muito. E fomos deixados sozinhos para gerenciar o estado de nossos dados com dois conceitos difíceis para a mente humana pensar: mutação e assincronia . Ele os chama de “ Mentos e CocaCola – ambos podem ser ótimos na separação, mas juntos eles criam uma bagunça”.

Então, o Redux propõe descrever todo o estado do seu aplicativo como um objeto simples. Para mudar algo no estado você precisa despachar ações. Ações são objetos Javascript simples que descrevem o que aconteceu com seu aplicativo.

No final, para unir ações e estados juntos, escrevemos uma função chamada redutor. Um redutor é apenas uma função Javascript que toma o estado e a ação como argumentos e retorna o próximo estado do aplicativo.

Três Princípios do Redux:

  1. Única fonte de verdade: o estado de todo o aplicativo é armazenado em uma árvore de objetos em um único armazenamento .
  2. Estado é somente leitura. Isso significa que a única maneira de alterar o estado é emitir uma ação (um objeto descrevendo o que aconteceu).
  3. As alterações são feitas com funções puras . Funções puras são funções que retornam um valor apenas dependendo do valor de seus argumentos. Eles não têm efeitos colaterais observáveis. Quando você chama a mesma função com o mesmo argumento, sempre obtém o mesmo valor de retorno. Funções puras também não modificam os argumentos que recebem. Na verdade, eles retornam um novo objeto, matriz ou função com as alterações feitas nela.

02. O contador App (Reagir com o estado local, não Redux aqui)

OK companheiros, voltando para onde estávamos vindo, vamos fazer o nosso pequeno aplicativo contador com o estado local apenas.

Para começar este tipo de boilerplates eu sempre uso create-react-app (CRA) com bootstrap (só para fazer as coisas simples, mas um pouco mais chique).

Eu mantive o src / index.js que chama o componente <App /> (desempenhando o papel da visualização principal do aplicativo) e criei um pequeno componente stateful chamado Counter.

Se você quer brincar com o código, você pode cloná-lo no repositório do GitHub aqui (lembre-se de que ele está no branch LocalStateApp).

Então, vamos dar uma olhada no que precisamos para construir nosso aplicativo simples.

src / index.js

Tão simples como é out-of-the-box.

src / App.js

Eu inicio meu componente de aplicativo inicializando o estado com uma variável de contagem que, por padrão, é definida como zero.

método render ()

Eu construí um método de renderização muito simples que destrói a contagem do estado e mostra algum texto. Ele também chama o componente stateful do contador passando o valor da contagem para ele e chama um método pequeno chamado renderButtons () para renderizar os botões de incremento / decremento.

Método componentrenderButtons do contador stateful

Botões chamam um método chamado updateCounter () e passam para ele o tipo de atualização que queremos.

Aqui já estamos construindo nosso caminho para o Redux. Um detalhe das ações no Redux é que, além de serem objetos simples que cabem a você, eles precisam ter uma propriedade type que não seja indefinida. (Apenas mantenha isso em mente por agora).

método updateCounter

Então aqui nós temos nosso método updateCounter que é muito similar ao que um redutor está no Redux. Obtém o estado atual da aplicação, obtém a ação desejada e, no final, devolve o novo estado da sua aplicação.

Nenhuma magia em tudo! O Redux é tão natural e fácil que você não sentirá diferença alguma desde que você conheça dois ou três pequenos detalhes que fazem as coisas parecerem muito complexas e difíceis de entender.

Este é o resultado final do nosso aplicativo:

Resultado do contador App w / estado local

03. O contador App (w / Redux State)

Ok amigos! Vamos quebrar o que fizemos até agora.

Para instalar o Redux você precisa fazer:

npm install –save redux reagir-redux

package.json depois de instalar o redux

Então, depois de instalar o Redux, suas dependências do package.json devem ficar assim ?.

O que agora?

Vamos quebrar nosso aplicativo! Mas não muito! ?

Então, meu primeiro passo será remover o estado do App Component e criar um repositório do Redux no index.js:

src / index.js: criando uma loja no Redux e passando informações para o nosso aplicativo principal.

O que fizemos aqui? ??

Nós editamos nosso arquivo index.js principal para criar um Redux Store e passá-lo como um adereço em nosso componente <App />.

Você pode notar as duas importações na parte superior: Provedor e createStore.

Você também deve observar o uso do <Provider> HOC em torno de <App />. Ele funciona do lado de fora abraçando nosso aplicativo principal (ele também pode incluir coisas do roteador) para passar suas funções de API como acessórios em nosso aplicativo principal.

Mas espere!

Qual é o redutor nessa definição de variável?

criação de loja

Oh, estamos sentindo falta do redutor!

Portanto, a loja precisa receber pelo menos uma função de redutor para realmente saber como as mudanças no estado operam.

Vamos fazer isso!

Em nosso antigo aplicativo, tivemos esse método updateCounter que dissemos ser um redutor.

Então, vamos movê-lo para index.js (você também pode extraí-lo para outro arquivo e importá-lo, mas vamos manter as coisas simples por enquanto).

Então extraímos o método updateCounter do nosso Componente App e ajustamos um pouco para dar um pouco mais de contexto.

Nós chamamos de redutor. É o redutor que queremos passar para o método createStore.

Nós também adicionamos o estado como um argumento porque quando extraímos do contexto do componente <App />, ele não está mais ciente de nenhum estado. Também paramos de usar o setState e começamos a retornar a nova contagem de acordo com o tipo de ação que estamos recebendo (desestruturamos a partir da ação arg).

Usamos recursos do ES6 para definir um initialState por padrão, se o estado for indefinido. Lembre-se do que eu disse acima, esse estado não poderia ser indefinido. É uma das condições do redutor Redux.

Além disso, nada de novo todo mundo! Adivinha? Nós temos nosso redutor e prontos para fazer o seu trabalho!

Agora vamos prestar atenção às ações!

Em nosso aplicativo antigo, eles eram a chamada updateCounter. Mas agora, como você lembra, precisamos usar o método dispatch () do Redux para despachar as ações, então precisamos adicionar essa camada da API ao nosso aplicativo.

Nós ajustamos apenas duas coisas! Nós temos o método de despacho, desestruturando-o dos adereços. Lembre-se do <Provider /> HOC? Seu papel é introduzir esses poucos métodos Redux no seu aplicativo principal.

Em vez de chamar this.updateCounter, estamos agora chamando uma função updateCounter desanexada, fornecendo-lhe o tipo de ação (como já estávamos no aplicativo antigo).

Vamos agora ver qual é a nova função updateCounter:

ação updateCounter

Ok, nada de novo, apenas recebemos o método de despacho e o retornamos com o tipo de ação que queremos disparar.

Neste momento, já criamos a loja. Criamos o redutor para capturar o estado anterior do aplicativo e a ação e retornar o novo estado. Criamos uma função de ação para enviar nossas ações de aplicativos.

O que mais? Isso deve estar funcionando agora! Por que não é?

Ohhh! Nosso componente App deve estar conectado ao Redux!

Então este é o nosso último passo a todos! ?

import connect from reac-redux

Começamos importando o método connect do react-redux (para o nosso arquivo App.js).

Agora, no final do nosso arquivo, onde fazemos o aplicativo padrão de exportação do nosso componente, precisamos fazer a conexão:

connect e mapStateToProps

OK! Lembre-se de que removemos o estado local do nosso componente App?

Então … como injetamos o estado da loja em nosso componente?

Precisamos fazer um “mapStateToProps”! Acostume-se a isso porque sempre será necessário. O componente de aplicativo receberá o novo estado como um prop. Você não tem mais this.state !! ?

mapStateToProps pega o estado do método de conexão (HOC) e o vincula ao componente do aplicativo.

E é isso ai pessoal! A essa altura, seu aplicativo deve estar em execução.

Sinta-se livre para dar uma olhada no código do meu repositório do GitHub (branch ReduxStateApp) aqui .

Claro que há muitas coisas para aprender depois disso, mas este é o primeiro passo para você entender como dar o pontapé inicial no Redux.

Agora peço-lhe para fazer a lição de casa: confira os dois aplicativos! Certifique-se de grok todas as etapas e compará-los. Coloque um monte de console.log para entender o que está acontecendo e, acima de tudo, aceite que há uma API no Redux que tem algumas regras restritas. Nem tudo é tão lógico para um nível de entrada como é esperado que seja! Mas essas são apenas dores de crescimento em prol do JavaScript!

Lembre-se sempre de ser forte e código em todos ??

E mantenha sua dor em cheque com um bom e quente ?? ?

04. Bibliografia

01. Redux Docs

02. egghead.io Curso de Dan Abramov sobre Começando com Redux