Posted on Sep 28 Está querendo aprender Redux num ambiente js ou react e ainda não sabe por onde começar? Neste artigo eu vou explicar os conceitos junto do código de forma direta para fazer você entender melhor na prática como ele funciona!Primeiro vamos entender que Redux é uma biblioteca de gerenciamento de estados de forma mais "global" do que os estados que temos convencionalmente no React por exemplo. Ele facilita com que diversas áreas da aplicação possam interagir entre si e centralizar sua informação.No Redux, o que engloba todos esses estados globais nós chamamos de "store". Pra caso tu já tenha usado, é como um provider da Context API do React.Aqui vou criar um objeto chamado store, para você tentar pegar uma ideia de como isso é representado.Indo de fora pra dentro, na nossa store nós podemos criar "slices", que são coleções nas quais contém dados. Cada slice é nomeado, e esse nome é utilizado para acessar os seus dados mais pra frente. A mesma lógica serve para um objeto:Vamos adicionar por exemplo um slice de configurações pra armazenar as coisas do nosso usuário:Ok Ok, até aí tudo bem, mas como nós podemos ler o valor guardado no slice? É igual um objeto store.configuracoes.tema?Não é tão simples assim, mas no contexto de React nós chamamos isso de Selector, que é quando você vai extrair um dado de dentro da store. No contexto JS isso é apenas uma leitura normal (selector pode acabar confundindo com querySelector).Existe a forma "nativa" de se pegar o valor, e existe a forma usada na biblioteca "react-redux", vou deixar ambos os exemplos aqui:Usando apenas o redux toolkit:Usando react-redux:Perfeito, já temos configurado a nossa store, nosso slice e conseguimos ler nossos dados... porém atualmente eles estão fixos, como podemos fazer para modificar os valores?O que usamos para isso é o que chamamos de "Reducers", eles interagem com nossos slices para mudar os seus valores usando uma lógica definida por você. Inclusive tu pode até assimilar isso com o próprio useReducer do React, que também usa uma lógica customizada para definir um valor.Vamos criar alguns reducers e atualizar a store para listar eles!Com os reducers criados, podemos usá-los pra alterar os valores do nosso slice! Isso é o que vamos chamar de "Action".A action executa um reducer e lhe fornece um resultado, daí você precisa executar um dispatch para que o resultado seja persistido (salvo) na nossa store.Novamente, mostrarei a forma nativa / react-reduxUsando apenas redux toolkit:Usando react-redux:Já cobrimos muitos tópicos da base de como se utilizar Redux Toolkit e também React Redux, mas queria te fazer uma pergunta: Acabou de notar que fizemos um CRUD?Pois nós conseguimos:Com essas informações agora conseguimos entender este diagrama que exemplifica o fluxo de dados do Redux:Com os métodos ensinados neste artigo você deve conseguir se dar bem com o Redux, mas caso queira checar melhor a implementação feita neste artigo, vou disponibilizar ambos os arquivos finais para uma consulta mais fácil:Arquivo final usando apenas redux toolkit: GistArquivo final usando react-redux: GistAmbos estão fazendo a mesma coisa, porém em ambientes diferentes! O primeiro sendo um javascript comum, enquanto o segundo é num ambiente React.E é isso pessoal! Agora vocês já sabem o kit de sobrevivência pra Redux Toolkit e também React Redux!Espero ter te ajudado de alguma forma, e sinta-se livre para deixar comentários de dúvidas ou feedback :)Eu sempre falo de programação no Twitter, se quiser acompanhar meu conteúdo, welcome!👋 Até uma próxima.Templates let you quickly answer FAQs or store snippets for re-use.salve Nick, ótimo artigo, eu sou backend mas tô dando manutenção num app react e esse artigo veio em boa horaQue ótimooo, bom saber disso Luis 🥰Se só uma pergunta minha gerou um artigo foda desses, vou começar a te encher de perguntas kkkkMandou bem demais! Era o start que eu precisava pra conseguir entender o assunto e fazer o desafio aqui. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Jonas Scholz - Sep 25 João Vitor Minosso - Sep 4 Dom | Five.Co - Sep 17 Janki Mehta - Sep 4 Once suspended, nickgabe will not be able to comment or publish posts until their suspension is removed. Once unsuspended, nickgabe will be able to comment and publish posts again. Once unpublished, all posts by nickgabe will become hidden and only accessible to themselves. If nickgabe is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Nícolas Gabriel. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag nickgabe: nickgabe consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging nickgabe will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.