React Redux

React ReduxEntendendo ES6 e a Arquitetura Redux

ES6

Arrow functions

Class

babeljs.io

Imutabilidade

Organização

Redux

Component

Action Creator Action Reducer Store

newState

Component

Action Creator Action Reducer Store

newState

Component

Apenas um Container Component por diretório

Nem todo Component é reutilizável

Nem todo Component tem/precisa ter estado

Container Component

Stateless/Dumb Component

Actions

Reducers

Component

Action Creator Action Reducer Store

newState

Action Creator

Action

Action Creator retorna uma action

Uma action vai mudar o estado do reducer

Uma action deve retornar um objeto ou função (redux-thunk middleware)

Component

Action Creator Action Reducer Store

newState

Reducer

O arquivo reducer contém um modelo do retorno da action

O reducer contém um switch case para tratar cada action

Action Creator Action Reducer Store

newState

Component #1

Component #2

Component #3

bit.ly/2g7sFEq