Redux Reduzido BasicãoPedro Correamedium.com/@hollentor <= (não é muito, mas é meu)

Olhemos essa treta

Reactando Errado● Comunicação direta entre

componentes ● Um componente acessa o

state ou faz alguma chamada que modifique outro componente

● Altamente acoplado● Confuso● Não escala bem● Infernal● É ruim● Não gosto● Fora Temer● Mo bosta...

Tira lá, coloca lá, volta ali, e soma 2...Manter dois itens sincronizados

É mais difícil do que parece:

● O visor de cima conta todas as mensagens nao lidas

● O debaixo conta cada um de cada chat

● Quando o debaixo é modificado o de cima tambem deve ser modificado

● Cada bloco tem um modelo e deve acessar cada um dos demais modelos independentemente para manter os valores corretos

● E mobile? Comofaz?● Dá ruim

https://www.youtube.com/watch?v=KtmjkCuV-EU

Flux

MAS QUE STRANGE!

Vantagens do FLUX● Tudo desacoplado● Os componentes React só se

modificam se houver necessidade● Um componente COMEÇAR a

reagir a um evento sem você precisar criar triggers específicos

● Um componente pode DEIXAR de reagir a um evento sem quebrar todo o resto

● Tudo fica rapidão porque rererererenderizar as coisas demora pakas

WTF - What The Flux?

● Unidirecional● É apenas um padrão

● Flux:

○ Componentes Disparam Ações (Adicionar um TODO)

○ E recebem Stores (Lista de TODOs)○ Actions pode criar varias actions

○ Dispatchers: tipo pubsub BUT:

Recebem todos os pedidos e enviam para todos os storages

○ Assim cada storage recebe o evento

porem se modifica se ele se importar ou não.

COMPONENT!● Recebem um JSON com os dados● Atualizam seu modelo apenas quando

o Store do componente for atualizado.

STORE!● Onde os dados são salvos● Possuem um modelo que representa a

view● São usados pelos componentes para

saber o estado da aplicação

STORE!● É capaz de se modificar quando

necessario.● É capaz de emitir eventos!

○ Listeners são criados no componente

○ Quando um store envia um evento o componente sabe que esta na hora de re-renderizar.

● Chamar diretamente o createTodo() é um antipattern

DISPATCHERS!

● É um singleton● Mantem uma ordem de

modificação sincrona● É utilizado pelas Stores para

receber actions● É utilizado pelos actions para

causar modificações no Store

ACTIONS!● Enviam mudanças de estado de

um store!● Possui

○ Uma string que define qual ação

○ Um payload com os dados

STORE!● Se inscrevem em Dispatchers

para receber actions● Precisam saber o que fazer

quando receber uma action● Só precisam implementar as

actions que lhe fazem sentido.

Desvantagens do FLUX

FUCKING BOILERPLATE

Cade Redux?

Redux… É Flux (eu acho)

● É flux, porem:○ Apenas uma fonte○ Permite histórico dos

estados da aplicação○ Objeto fonte é read-only

(burrada-proof)○ Reducers são funções

simples que devolvem objetos simples

Action

Reducers● Modificam o store● Semelhante a lógica do Flux

para modificar o Store● Sempre retorna o elemento

modificado do store● O Store retornado deve ser uma

cópia do original!

Combinando Reducers● Cada Reduce é responsável

por um conjunto de dados do store global

● Evita uma arquivo gigante com todas as actions possíveis

Criando Store

Dispatching Actions

Grudando Redux no React

RecomendoReact JS + Flux + Reduxhttps://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

You don't know JS ( API QEMEA )https://github.com/getify/You-Dont-Know-JS