Guilherme Ventura, Desenvolvedor Front-end Sênior da Embratel fala sobre React + Redux. Pensando em Redux no JS Experience'17 Saiba mais em https://eventos.imasters.com.br/jsexperience

1. REACT
+ REDUX
PENSANDO EM REDUX

2. Meu nome é Guilherme
Ventura
Desenvolvedor Front-end apaixonado por novas tecnologias
OLÁ!

3. INTRODUÇÃO
Vamos começar pelo começo, certo?

4. REACT
∎ O que é?

5. Uma biblioteca Javascript para
construir interfaces de usuário.
- React Homepage

6. REDUX
∎ O que é?
∎ Quando utilizar no meu projeto?
∎ Os três pilares do redux

7. Redux is a tool for managing both data-state and UI-
state in JavaScript applications. It's ideal for Single
Page Applications (SPAs) where managing state over
time can be complex. It's also framework-agnostic, so
while it was written with React in mind, it can even
be used with Angular or a jQuery application.
- Brad Westfall, on Leveling Up with React: Redux

8. QUANDO USAR NO
MEU PROJETO?

9. Don't use Redux until you have problems with vanilla
React.
- Dan Abramov
You'll know when you need Flux. If you aren't sure if
you need it, you don't need it.
- Pete Hunt

10. OS TRÊS
PILARES
DO REDUX

11. ∎ Single source of truth
∎ State is read-only
∎ Changes are made with pure functions

12. SINGLE SOURCE
OF TRUTH
O estado de toda sua aplicação é armazenado em uma árvore de objetos dentro de
um único store.

13. STATE IS
READ-ONLY
A única maneira de mudar o estado é emitindo uma ação, um objeto descrevendo o
que aconteceu.

14. CHANGES ARE MADE
WITH PURE FUNCTIONS
Para especificar como a árvore de estado é transformada pelas ações, você
escreve reducers puros.

16. OK, por onde
começar a usar o
REDUX?

17. PRA CADA
COMPONENTE...
Planeje a
estrutura
Crie
Componente
s de
Apresentaçã
o
Escreva as
Ações
Escreva os
Reducers
Amarre as
ações aos
seus
componentes

18. PLANEJE A
ESTRUTURA
Disseque cada ponto da sua aplicação antes de começar a codificar. Identifique os
componentes, a relação entre cada um deles, quais ações/dados cada um deve ter.
Ou enfrente as consequências depois...

19. CRIE OS COMPONENTES
DE APRESENTAÇÃO
Antes de começar a criar actions, reducers e containers, crie os componentes
que não vão lidar diretamente com a lógica da aplicação para facilitar a visualização
e a estrutura.

20. ESCREVA AS
AÇÕES

21. EXEMPLO: ACTION CREATOR

22. ESCREVA OS
REDUCERS

23. EXEMPLO: REDUCER

24. AMARRE AS AÇÕES
AOS SEUS
COMPONENTES
∎ O método connect
∎ mapStateToProps
∎ mapDispatchToProps

25. EXEMPLO: connect()

26. EXEMPLO: mapStateToProps

27. EXEMPLO: mapDispatchToProps

28. E finalmente…
Repita tudo outra
vez :)

29. LINKS UTÉIS
∎ http://redux.js.org/
∎ https://egghead.io/series/getting-started-with-redux
∎ http://blog.isquaredsoftware.com/series/idiomatic-redux/
∎ https://hackernoon.com/thinking-in-redux-when-all-youve-
known-is-mvc-c78a74d35133

30. OBRIGADO!
Dúvidas? Sugestões?
guilherme.ventura@globalhitss.c
om.br