Nesta thread conceitual sobre o Redux, você aprenderá:
✅ O que é o Estado de uma aplicação
✅ O que é o Redux
✅ 3 Sinais de que você precisa dele
✅ Desvantagens em utilizá-lo
✅ Respostas de 3 dúvidas comuns sobre ele
Vem comigo! 🎉
🔥 Ontem, publiquei uma enquete sobre o Redux. Se você ainda não votou, dê um pulinho lá e volte.
Sua opinião é importante =)
👇
🔥 O que é o Estado de uma aplicação?
É a forma em que a sua aplicação se encontra em um determinado momento no tempo.
Em momentos específicos do tempo, existem diferentes informações armazenadas em memória.
Essas informações são chamadas de State (Estado).
🔥 O que é o Redux?
O Redux é uma lib que armazena e facilita o gerenciamento de estados de uma aplicação JavaScript.
Ele te leva a centralizar o estado da aplicação em um só lugar, e possibilita que todos os componentes do projeto recebam esse estado atualizado.
🔥 Como o Redux armazena e gerencia estados?
Todo o estado da sua aplicação é contido e representado como um objeto JavaScript.
Para que isso aconteça de forma previsível, o Redux possui 3 princípios fundamentais.
🔥 O 1º princípio do Redux
🔴 Única fonte da verdade
Todo o estado da sua aplicação é armazenado em um objeto, dentro de uma única store.
Uma store é o container no qual o state da aplicação é armazenado.
Isso significa que em toda a aplicação, há um único lugar onde as informações de estado ficarão centralizadas.
Um único objeto de estado é utilizado para todos os componentes e páginas da aplicação.
🔥 O 2º princípio do Redux
🔴 O Estado é read-only
O Estado é apenas leitura, e deve ser modificado apenas através de 'actions', objetos que descrevem qual modificação está sendo feita.
🔥 O 3º princípio
🔴 Mudanças devem ser feitas apenas com funções puras
Para especificar como o estado é modificado pelas actions, você escreve reducers puros.
Reducers são funções puras que recebem, por parâmetro, o estado anterior, uma action, e retornam o novo state (ao invés de modificar, diretamente o state anterior).
☝️ Se você ainda não sabe o que são funções puras, escrevi uma thread focada nelas, em que você aprenderá, através de exemplos, o que elas são e como funcionam.
O link está nos últimos tweets =)
🔥 3 Sinais de que você precisa do Redux
🔵 Sua aplicação tem uma quantidade considerável de dados, e eles mudam frequentemente
🔵 Seria mais fácil trabalhar com todo o estado da aplicação centralizado em um só lugar (única fonte da verdade)
🔵 Você sente que manter todo o estado isolado da sua aplicação em um componente top-level, no React por exemplo, não é mais a abordagem ideal/suficiente
Exemplos de aplicações robustas que utilizam o Redux:
🔸 O website mobile do Twitter
🔸 O debugger do Firefox
🔸 O Hyper (terminal)
🔥 Desvantagens do Redux
O Redux não foi projetado para ser a maneira mais curta e rápida de se escrever código JavaScript.
Para que a atualização do estado aconteça, ele adiciona boilerplate e restrições em sua aplicação. E você terá que se esforçar para segui-las.
Você se dará bem com o Redux se aprender a descrever:
☑️ O state da sua aplicação através de objetos e arrays
☑️ As modificações do projeto através de objetos
☑️ A lógica das mudanças através de funções puras
🔥 Respostas de dúvidas comuns sobre o Redux
1⃣ O Redux só pode ser usado com o React?
Não. Embora seja incomum, por exemplo, ver Redux e JS puros em uma aplicação robusta em produção, é possível.
Para aplicações com o React, a lib usada é a react-redux.
Existem também bindings disponíveis para Angular, Angular 2, Vue, etc.
2⃣ Em quais ambientes o Redux pode ser implementado?
🔸 Client Side
🔸 Server Side
🔸 Native
E o mais interessante: é possível utilizar o mesmo código Redux entre plataformas, web/native, por exemplo.
A lógica de negócio é utilizada nos ambientes, sem compartilhar a mesma view =)
3⃣ É necessário ter alguma ferramenta de build para utilizar o Redux?
O uso do Redux independe do seu processo de build, e 👉não👈 requer Webpack, React, hot reloading, e ferramentas similares.
Quer que eu continue com essa série?
Então dê um 👉retweet👈, para que essa thread alcance mais pessoas e eu obtenha mais feedbacks e dúvidas, para planejar e publicar + conteúdo 😃
Linkei o início da thread ali em baixo, para facilitar =)
Te vejo na próxima 🔥
Thread sobre Funções Puras:
P.s.: devido à problemas com o Twitter, tive que apagar a primeira publicação dessa thread e "repostá-la" 😕
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.