Embed Size (px)
Citation preview
React & Redux
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: @keullermagMail: [email protected]: https://github.com/keullerSlack: react-sp.slack.com
Redux foi inspirado em alguns conceitos, como:
✔ Flux Pattern
✔ Elm Architecture
✔ Om – single state atom
✔ ClosureScript – re-evaluation works
Redux propõe um modelo de estado único para aplicação!
Gerenciar o estado e suas mudanças é complexo!
O Estado é calculado a partir de funções redutoras (reducers)!
A combinação de várias reducers resulta na árvore de
estado.
Redux é composto de 3 elementos:
Store = action + Σ f(reducer)
Redux atua como uma cola entre seus componentes e os dados da sua aplicação...
Componente Store
Action
Redux não é uma biblioteca exclusiva do Ecosistema React!
ACTION e/ou EVENT
Ocorrem constantemente
em sua aplicação
sinalizando mudanças.
let action = { type: ADD_COMMENT, payload: {...}}
ACTION CREATORS
São funções que produzem (criam) ações.
// ES5 syntaxfunction addComment(data) { return { type: ADD_COMMENT, payload: data }}
// ES6 syntaxconst addComment = (data) => ({ type: ADD_COMMENT, payload: data})
REDUCER
Recalcula o novo estado através de funções “puras”.
let comments(state, action) => _state
STORE
Árvore de dados da sua aplicação
STATE
{ comments: [ {...}, {...} ]}
REDUX :: ARCH
ACTIONVIEW
MIDDLEW
ARE
MIDDLEW
ARE
MIDDLEW
ARE
REDUCER
REDUCER
REDUCER
APP STATE
React + Redux
React + Redux
• High Order Components• Function composition• Selectors• Middlewares
Redux Ecosystem
• Redux-Action-Helper• Reselect• Redux-Thunk• Redux-Saga• Redux-Loop• Redux-Observable
Redux Alternatives
• Flux Traditional• Mobx• Cerebral
Redux :: Prós & Cons
• Simples• Single Store• Performance• Leve ~2kb
• Aprendizado• Single Store• Boilerplate Code• Muitos
“complementos”
Prós Cons
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
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
OBRIGADO!
twitter: @keullermagmail: [email protected]: react-sp.slack.com
Juntem-se a nós comunidade React-SP!
