React: Mutabilidade x Imutabilidade no Redux Toolkit com Immer

Clonando repositório - Apresentação

Boas-vindas ao curso de React: Redux com imutabilidade! Meu nome é Luiz Fernando e vamos aprofundar nossos conhecimentos sobre o Redux Toolkit, que trabalha com imutabilidade. Caso tenham dúvidas sobre mutabilidade e imutabilidade e queiram aprender mais sobre como o Redux trabalha e sobre o Winner, que é um pacote usado pelo Redux por trás do código, esse curso é ideal para vocês.

De features, criaremos um botão "Quero anunciar" que, ao clicarmos, seremos redirecionados para a tela "/anuncie", também criada por nós. Nessa tela tem um formulário na metade inferior onde conseguimos preencher os dados, como o nome e o preço do produto, para criar um anúncio. Por fim, clicamos em "Cadastrar produto", no centro inferior da tela.

Ao fazemos isso e voltarmos para página "/eletronicos", conseguiremos ver e editar o item que criamos, assim como deletá-lo. Tudo isso utilizando a imutabilidade e immer.

Então aprenderemos como mudar estados dentro do Redux e porque às vezes precisamos utilizar o return e outras vezes não. Também descobriremos os benefícios da imutabilidade e do Redux.

Além disso, entenderemos porque que conseguimos escrever de forma mutável, como state.push, dentro do Redux e, por trás do código, ele transformar isso em algo imutável. Veremos que isso não é mágica, nem algo de outro mundo, e sim a utilização do Winner. Então aprenderemos neste curso o porquê e como ele utiliza o dessa forma.

Assim nunca mais teremos dúvidas sobre imutabilidade ou sobre como utilizar o Redux Toolkit.

Vejo vocês no curso!

Clonando repositório - Clonando o repositório

Para começarmos esse curso, utilizaremos o código do curso anterior de Redux, que é o React: gerenciamento de estados globais com Redux. Então acessaremos o GitHub do trato-tech e, no canto direito, acima das pastas do repositório, clicaremos no botão "Code".

Com a aba do "Code" aberta abaixo do botão, copiaremos o link do projeto. Só tenham certeza de estarem na branch main. Então confiram se na aba acima das pastas, no canto esquerdo, está escrito "main", porque existem várias branches nesse repositório, que é do curso anterior.

Uma dica que eu dou é que em todos os curso meu, o código é separado tanto por aula, quanto por vídeo de cada aula. Então se quiserem o código de uma aula inteira, podem procurar pela branch com letra maiúscula, como "Aula 1".

Contudo se quiserem um código específico de um vídeo, basta descer a lista de branches e procurar os códigos que começam com letra minúscula e têm dois números, como "aula 1.2", que vai ser específico para o código da aula 1, vídeo 2. Dessa forma você pode copiar o código e já trabalhar nele a partir do vídeo 3.

Dada essa explicação, vamos selecionar a branch main, clicar em "Code" e copiar o link do repositório novamente. Em seguida, abriremos nosso terminal do git e acessaremos o endereço onde queremos fazer o disclame. Feito isso, codamos git clone https://github.com/alura-cursos/trato-tech.git e pressionamos "Enter" para copiarmos o repositório.

Quando a cópia termina, escrevemos cd trato-tech, que é o nome da pasta e do repositório que copiamos. Após acessarmos a pasta, codamos code . para abrirmos o VS Code. Em seguida, ainda no terminal, escrevemos yarn && yarn start. O yarn é o comando de instalação e o && é para concatenarmos dois comando diferentes, no caso o comando yarn start.

Então vamos instalar os pacotes com yarn, e depois (&&) executaremos esses pacotes, com yarn start, ou seja, ele irá inicializar o projeto automaticamente. Enquanto isso está acontecendo, podemos abrir o VS Code para mostrar para vocês onde paramos.

Na coluna da esquerda do VS Code, ao acessarmos "src > pages", reparamos que temos três páginas no momento. Temos a "Home", onde mostra nossas categorias, como a "eletrônicos". Também temos a página "Categoria" com as próprias categorias, ou seja, se clicarmos em "eletrônicos", aparecerão os itens dessa pasta e uma breve descrição da categoria.

Por fim, temos a página "Carrinho", porque temos a ação de adicionar itens no carrinho e, quando clicamos no carrinho, podemos aumentar ou diminuir a quantidade de itens no carrinho ou finalizar a compra. Com isso, aprendemos como criar, um reducer e como fazer um dispacher de uma action.

Nossa terminal já instalou os pacotes e agora está iniciando o projeto no navegador web. Quando a tela carrega, vemos como está funcionando. Temos a página inicial, ou seja, a "Home" e no centro da página temos as categorias.

Quando clicamos em alguma categoria, como a "Eletrônica", somos redirecionados para outra página. Nela temos as informações da categoria, metade superior esquerda da tela, e produtos organizados em forma e grade, na metade inferior da tela.

Se adicionarmos um produto ao carrinho, como o "Assistente virtual", e depois clicarmos no ícone de carrinho, no canto superior direito da página, seremos redirecionados. Na página do carrinho, vemos o produto que adicionamos e conseguimos aumentar ou remover mais produtos ou finalizar a compra.

Agora conseguimos clonar nosso projeto, instalar nossas dependências e inicializar o projeto. Vimos que está tudo funcionando, então no próximo vídeo começaremos a construir o código desse curso.

Clonando repositório - Criando a rota anuncie

Com nosso código funcionando, começaremos a criar as features que queremos. A primeira delas será uma nova tela para conseguirmos anunciar um item novo.

Atualmente temos alguns itens, divididos nas categorias "eletrônicos", "jogos", "escritório" e "som e imagem". Agora poderemos criar novos itens para uma dessas categorias. Para isso, abriremos o VS Code, e acessaremos "src > routes.js". Nesse arquivo criaremos a rota que queremos.

Clicaremos no número 14, que está à esquerda do código, para selecionar toda a linha 14 e depois pressionamos o atalho "Alt + Shift + ↓". Esse é um comando do VS Code para copiar o código da linha selecionada e colá-lo na parte de baixo.

Fizemos isso porque vamos reaproveitar o código para criar a rota nova, que chamaremos de 'anuncie', para quando quisermos anunciar um item. Também criaremos um novo elemento chamado <Anuncie />, mas como ele ainda não existe, por enquanto ficará marcado como erro.

<Route path='anuncie' element={<Anuncie />} />

Agora, na coluna da direta, acessaremos "src > pages" e vamos clicar com o botão direito na pasta "pages". No menu, selecionamos a opção "Novo Arquivo" que se chamará "Anuncie/index.js". Assim criamos a pasta "Anuncie" e o arquivo index.js.

Lembrete: Se selecionarmos a opção "Novo Arquivo" no VS code e codarmos na estrutura "nomeUm/nomeDois", o que estiver antes da barra se transforma em uma pasta. Esse processo economiza tempo para nós.

O arquivo index.js está aberto e, dentro dele, codaremos nosso componente.

export default function Anuncie() {
    return (
        <div>
            anuncie
        </div>
    )
}

Agora voltaremos para o routes.js e na linha 15, onde criamos a rota "anuncie", vamos clicar onde está dando erro e pressionar "Ctrl + Espaço". Assim teremos um menu flutuante que aparece com dicas do que podemos importar para corrigir o erro de <Anuncie />.

Entre as importações temos o Anuncie de "pages/Anuncie", que vamos selecionar e apertar "Enter". Com isso, na parte superior do código, observamos que foi feito o import Anuncie from 'pages/Anuncie';, então não temos mais erro e tudo está funcionando como esperamos.

Pressionamos "Ctrl + S" para salvar o arquivo e voltaremos para o navegador, onde recarregaremos a página pressionando "F5". Feito isso, na barra de endereço vamos escrever "localhost:3000/anuncie" para observarmos se essa rota existe. Com isso, constatamos que ela realmente foi criada, mas ainda está vazia porque não implementamos nada nela.

Faremos a implementação nos próximos vídeos.

Vejo vocês lá!

Sobre o curso React: Mutabilidade x Imutabilidade no Redux Toolkit com Immer

O curso React: Mutabilidade x Imutabilidade no Redux Toolkit com Immer possui 158 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Clonando repositório
• Crie um formulário
• Mutabilidade x Imutabilidade
• Aprenda sobre Immer
• Edite um item
• Delete um item