TDC2016SP - Trilha Frameworks JavaScript

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: keuller.magalhaes@gmail.comGithub: 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

Q & A

twitter: @keullermagmail: keuller.magalhaes@gmail.comSlack: react-sp.slack.com

OBRIGADO!

twitter: @keullermagmail: keuller.magalhaes@gmail.comSlack: react-sp.slack.com

Juntem-se a nós comunidade React-SP!