O documento apresenta informações sobre Redux e React, incluindo que Redux propõe um modelo de estado único para aplicações e é composto por três elementos: Store, Action e Reducer. Também discute boas práticas para uso de Redux, como manter dados da aplicação no Store e usar action creators ao invés de actions.

1. React & Redux

2. About me...
• Desenvolvedor full stack web
• Polyglot programmer (Java, JS, Golang, Bash, etc)
• ~15 anos no mercado de TI
• Projetos realizados Brazil, EUA e Chile
• Geek, Gamer, Father, etc...
twitter: @keullermag
Mail: keuller.magalhaes@gmail.com
Github: https://github.com/keuller
Slack: react-sp.slack.com

3. Redux foi inspirado em alguns
conceitos, como:
✔ Flux Pattern
✔ Elm Architecture
✔ Om – single state atom
✔ ClosureScript – re-evaluation works

4. Redux propõe um modelo de
estado único para aplicação!
Gerenciar o estado e suas
mudanças é complexo!

5. O Estado é calculado a partir de
funções redutoras (reducers)!
A combinação de várias
reducers resulta na árvore de
estado.

6. Redux é composto de 3 elementos:
Store = action + Σ f(reducer)

7. Redux atua como uma cola entre
seus componentes e os dados da
sua aplicação...
Componente Store
Action

8. Redux não é uma biblioteca exclusiva do
Ecosistema React!

9. ACTION e/ou EVENT
Ocorrem
constantemente
em sua
aplicação
sinalizando
mudanças.
let action = {
type: ADD_COMMENT,
payload: {...}
}

10. ACTION CREATORS
São funções que produzem (criam) ações.
// ES5 syntax
function addComment(data) {
return {
type: ADD_COMMENT,
payload: data
}
}
// ES6 syntax
const addComment = (data) =>
({
type: ADD_COMMENT,
payload: data
})

11. REDUCER
Recalcula o novo estado através
de funções “puras”.
let comments(state, action) => _state

12. STORE
Árvore de dados
da sua aplicação
 STATE
{
comments: [
{...},
{...}
]
}

13. REDUX :: ARCH
ACTIONVIEW
MIDDLEWARE
MIDDLEWARE
MIDDLEWARE
REDUCER
REDUCER
REDUCER
APPSTATE

15. React + Redux

16. React + Redux
• High Order Components
• Function composition
• Selectors
• Middlewares

17. Redux Ecosystem
• Redux-Action-Helper
• Reselect
• Redux-Thunk
• Redux-Saga
• Redux-Loop
• Redux-Observable

18. Redux Alternatives
• Flux Traditional
• Mobx
• Cerebral

19. Redux :: Prós & Cons
• Simples
• Single Store
• Performance
• Leve ~2kb
• Aprendizado
• Single Store
• Boilerplate Code
• Muitos
“complementos”
Prós Cons

20. Boas Práticas
• Mantenha os dados da aplicação
no STORE
• Use action creators ao inves de
actions
• Use props ao inves de state no
componente

21. Boas Práticas
• Use bibliotecas para reduzir boilerplate
code
• Explore com frequência connect (HoC)
• Organize e modularize bem os reducers
• Encapsule chamadas de APIs em ações
assíncronas
• Utilize Redux DevTools durante o
desenvolvimento

22. Q & A
twitter: @keullermag
mail: keuller.magalhaes@gmail.com
Slack: react-sp.slack.com

23. OBRIGADO!
twitter: @keullermag
mail: keuller.magalhaes@gmail.com
Slack: react-sp.slack.com
Juntem-se a nós
comunidade React-SP!