Share
Embed
Slide 1
Slide 1 text
Context API e Redux
Não são concorrentes, eis o porquê
Slide 2
Slide 2 text
Talysson / @talyssonoc.
Web dev @ Codeminer42
beacons.page/talyssonoc.
Slide 3
Slide 3 text
Porque pensa-se que são concorrentes?
Slide 4
Slide 4 text
Porque ambos parecem lidar com gerência de estado
Slide 5
Slide 5 text
Estado
Dados de uma aplicação em
um determinado momento no
tempo.
Slide 6
Slide 6 text
Gerência de
estado
O modo como estes dados
serão armazenados e
alterados.
Mas não necessariamente
diz respeito a como eles
serão distribuídos.
Slide 7
Slide 7 text
Redux
Armazenamento
Alteração
Slide 8
Slide 8 text
Context API
Não faz gerência de estado
Armazenamento?
Alteração?
Distribuição
Slide 9
Slide 9 text
Distribuição de
dados
Canal de comunicação pelo
qual dados poderão ser
acessados de maneira
padronizada dentro de um
escopo definido.
Por exemplo, dentro de uma
parte da árvore de
componentes.
Slide 10
Slide 10 text
Context API
Slide 11
Slide 11 text
Redux
Gerência
de
estado
Distribuição
de
dados
Context
API
Slide 12
Slide 12 text
Redux
●
Focado em gerenciar
estado (dados puros)
●
Árvore de estado única
●
Lógica componível
através de reducers,
middlewares e enhancers
●
Independente de UI
●
Ignorante quanto a
distribuição do estado
Slide 13
Slide 13 text
Context API
●
Focado em distribuir
qualquer dado ou
funcionalidade. Ex.:
roteamento, tema,
orientação da tela, etc
●
Cada contexto pode ser
usado separadamente
●
Depende da hierarquia
definida na UI
●
Composição manual e
também dependente da UI
Slide 14
Slide 14 text
Redux
Gerência
de
estado
Distribuição
de
dados
?
Context
API
Slide 15
Slide 15 text
Redux
Gerência
de
estado
Distribuição
de
dados
react-redux
Context
Context
API
Slide 16
Slide 16 text
Redux + distribuição de dados
Distribuição
Slide 17
Slide 17 text
Redux
?
Gerência
de
estado
Distribuição
de
dados
Context
API
react-redux
Context
Slide 18
Slide 18 text
Redux
Gerência
de
estado
Distribuição
de
dados
Context
API
useState()
useReducer()
XState
react-redux
Context
Slide 19
Slide 19 text
Context API + gerência de estado
Armazenamento
+
Alteração
Slide 20
Slide 20 text
Apesar de existir uma interseção entre as
possibilidades de uso de Context API e Redux...
Context
API
Redux
Slide 21
Slide 21 text
Há problemas que só a Context API resolve,
e há problemas que só o Redux resolve
Context
API
Redux
Slide 22
Slide 22 text
Context API e Redux podem ser usados lado a lado
Cada um deles para atacar problemas diferentes
Slide 23
Slide 23 text
Obrigado!
@talyssonoc.
beacons.page/talyssonoc