basicão de redux (pedro corrêa)
TRANSCRIPT
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
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.
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
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
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