Thread by @rogermelodev

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 =)

👇

https://twitter.com/rogermelodev/status/1163930035671195648

🔥 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 🔥

https://twitter.com/rogermelodev/status/1164364550847762432

Thread sobre Funções Puras:

https://twitter.com/rogermelodev/status/1149072307291377670

P.s.: devido à problemas com o Twitter, tive que apagar a primeira publicação dessa thread e "repostá-la" 😕