Curso de Domine REDUX e REDUX TOOLKIT com React JS - 2023 [FR]

Dominando REDUX e REDUX TOOLKIT com React JS - 2023 [EN]
Aprenda Redux e Redux Toolkit com visuais simples e código. Acessível a todos os níveis (Iniciantes e Profissionais)

Aprenda Redux e Redux Toolkit com visuais simples e código. Acessível a todos os níveis (Iniciantes e Profissionais)

Neste curso, desafio-me a explicar o Redux e o Redux Toolkit da maneira mais simples e clara possível no MUNDO! Não apenas explicarei a lógica por trás dessas duas versões com diagramas, gráficos, visuais e código JavaScript Vanilla simples, mas também iremos além, adaptando nossos exercícios à biblioteca React.js para conectar nossas aplicações React ao Redux e à biblioteca Redux Toolkit. Passo 1: Explicarei os conceitos do Redux de forma teórica. Passo 2: Abordarei todos os conceitos, um por um, em pequenos exercícios que vão direto ao ponto. Passo 3: Aplicaremos todos esses conceitos em pequenos exercícios em uma aplicação real do React JS. Passo 4: Depois que você estiver confortável com o Redux, apresentarei a você o Redux Toolkit em 33 novos vídeos. Passo 4: Depois de estudar os conceitos do Redux Toolkit, atualizaremos nossa aplicação React com Redux para a versão Redux Toolkit. Você também pode baixar as aplicações codificadas neste curso, as imagens e os diagramas na seção Recursos. O que exatamente estudaremos neste curso? SEÇÃO 1: Vou direto ao ponto e indicarei claramente o que você aprenderá neste curso: Vídeo 1: No primeiro vídeo de introdução, explico a você, de forma global e teórica, o conceito do Redux. Veremos por que usar essa biblioteca, se é obrigatório. Abordaremos os conceitos essenciais a serem lembrados e terminaremos com os pré-requisitos e ferramentas essenciais antes de iniciar o curso. Vídeo 2: Neste vídeo, estudaremos principalmente as ações no Redux. Veremos que essas ações são objetos com a propriedade de tipo e que podemos gerá-las por meio de funções criadoras de ação. Vídeo 3: Neste vídeo, veremos o Reducer no Redux. Veremos que o Reducer é uma função pura que aceita dois argumentos (prevState e action). Este Reducer é o meio que nos permitirá manipular nossa Store Redux. Vídeo 4: Neste vídeo, criaremos nossa Store Redux. Para isso, teremos que usar o método createStore() para o qual teremos que passar nosso Reducer como argumento. createStore(myReducer). Vídeo 5: Neste vídeo, veremos como lidar com duas ações no nível do reducer (parte 1). Vídeo 6: Neste vídeo, continuaremos com o gerenciamento de várias ações por meio de diferentes reducers. Vídeo 7: Neste vídeo, colocaremos em prática os conceitos do Redux estudados até agora em uma aplicação React JS. Para isso, precisaremos da biblioteca React-Redux, que teremos que instalar em nossas dependências via NPM. Vídeo 8: Neste vídeo, continuaremos a aplicação prática dos conceitos do Redux em uma aplicação React. Portanto, obteremos o Redux em nossa aplicação React. Para isso, teremos que instalar o pacote redux nas dependências. Isso nos permitirá criar nossa Store Redux em nossa aplicação. Também teremos que instalar o pacote react-redux para tê-lo em nossas dependências do React para nos permitir conectar as duas bibliotecas React e Redux. Essa dependência nos permitirá, por meio do Provider, passar a store redux por meio de uma prop para que ela possa ser acessível em todos os lugares de nossa aplicação React. Isso parece complicado para você? Não se preocupe, é moleza. Vídeo 9: Neste vídeo, continuaremos a aplicação prática dos conceitos do Redux em uma aplicação React. Portanto, importaremos o método connect do react-redux, que nos permitirá gerar um componente de ordem superior (Higher Order Component) para poder acessar a Store Redux e recuperar dados dela. Para isso, teremos que passar um argumento mapStateToProps para o método connect. Esta é uma função que nos permitirá recuperar o estado como props. Vídeo 10: Neste vídeo, passaremos um segundo argumento mapDispatchToProps para o método connect, que é uma função que nos permitirá passar o método dispatch como props. Basta importar a ação que queremos despachar e passá-la como argumento para o nosso dispatch. Vídeo 11: Neste vídeo, aprenderemos a usar o Hook useSelector como uma alternativa ao mapStateToProps. Para isso, não precisaremos mais passar pelo componente de ordem superior connect. Vídeo 12: Neste vídeo, aprenderemos a usar o Hook useDispatch como uma alternativa ao mapDispatchToProps. Novamente, não precisaremos mais passar pelo componente de ordem superior connect. Vídeo 13: Neste vídeo, daremos uma olhada na documentação do Redux e do React-Redux e veremos a importância da documentação na programação. Vídeo 14: Neste vídeo, criaremos uma nova ação que será gerenciada por meio de um segundo reducer. Isso nos permitirá aprender como combinar vários reducers em uma aplicação React. Vídeo 15: Neste vídeo, descobriremos o payload nas ações. De fato, até agora, só vimos o tipo no objeto de nossa ação. Além desse payload, também podemos especificar outra propriedade. Vídeo 16: Neste vídeo, veremos, de forma teórica, como realizar requisições get e lidar com ações assíncronas por meio do middleware thunk. Vídeo 17: Neste vídeo, veremos concretamente como realizar requisições get e lidar com ações assíncronas por meio do middleware thunk. Vídeo 18: Neste vídeo, veremos como instalar e usar a extensão Redux Devtools. Do vídeo 19 ao vídeo 31, codificaremos juntos uma pequena aplicação de LIVROS. O objetivo desta aplicação React/Redux é colocar em prática os conceitos estudados ao longo deste curso Redux com React. Veremos como despachar ações para criar um livro em nossa biblioteca de LIVROS. Veremos como despachar outra ação para excluir um livro específico ou excluir todos os livros existentes. Essas ações despachadas serão gerenciadas por meio de reducers. Veremos como recuperar livros da API do Google Books. Para isso, precisaremos do axios e do middleware Thunk. Para consultar a API do Google Books, teremos que especificar o assunto do livro em um mecanismo de busca. Depois de enviar a solicitação, exibimos um spinner para indicar ao usuário que estamos consultando a API. Tudo isso será gerenciado por meio do Reducer, que captura uma ação específica em relação a esse caso. Depois de recuperar os livros, despacharemos outra ação para salvar os livros e exibi-los em uma lista não ordenada. Ao clicar em um item desta lista, expandiremos uma seção para acessar as informações do livro selecionado. Exibiremos uma miniatura da capa do livro, o título do livro, o autor e uma breve descrição. Sob esta seção, teremos dois botões. O primeiro botão nos permite abrir uma nova guia para nos dar acesso direto ao livro no Google Books. O segundo botão nos permite salvá-lo em nossa biblioteca. Novamente, despacharemos uma ação passando um objeto no tipo para que o Reducer possa atualizar o estado e incluir o livro entre aqueles já existentes na biblioteca de Livros. Para não perder os livros salvos, eles serão salvos no localStorage.