O documento apresenta os conceitos e princípios do Redux para gerenciamento de estado em aplicações React. Redux utiliza um único estado global (store) acessível por componentes através de actions e reducers que modificam o estado de forma previsível. Components React se conectam à store para renderizar a interface baseada no estado atual.

1. UTILIZANDO REDUX NO
DESENVOLVIMENTO DE
APLICAÇÕES EM REACT

2. ARMANDO AUGUSTUS FREIRE
Análise e desenvolvimento de sistemas,
Desenvolvimento front-end e apaixonado por UX
GABRIEL TOSTA
Análise e desenvolvimento de sistemas
Focado em performance e boas práticas,
desenvolvedor front-end e mobile híbrido

3. REACT
Declarativa e baseada em components
1

4. Declarativa
Desenvolvimento das
views. React renderiza
apenas quando os dados
da aplicação forem
alterados
REACT
Components
Componentes
encapsulados possuem
seu próprio estado.
Com a lógica no JS
podemos ter dados
complexos no App sem
impactar diretamente a
DOM

5. REDUX
Gerenciamento de estado da aplicação
1

6. CONTROLAR MUTAÇÃO E
SINCRONIA ENTRE COMPONENTES
Manipular apenas o state da aplicação,
evitando manipulação direta da DOM.
Mutações passam a ser previsíveis
quando colocamos restrições em como e
quando elas ocorrem.

7. TRÊS PRINCÍPIOS DO REDUX
Single source of truth
O estado da aplicação
é armazenado em um
objeto e disponibilizado
através de uma Store
State is read-only
A única forma de
mudar o state da
aplicação é emitindo
um action (objeto)
descrevendo o que
aconteceu
Changes are made
with pure functions
Para especificar
como o state é
alterado por uma
action, usamos
funções JS puras
chamadas reducers

8. SINGLE SOURCE
OF TRUTH

9. CHANGES ARE
MADE WITH PURE
FUNCTIONS

10. Impure fn Pure fn
function impure(a, b) {
return a + b * 2;
}
function pure(a, b) {
return a + b;
}
const pure = (a, b) => {
return a + b;
}

11. STATE IS READ-ONLY

12. State is Read-Only
let hasChanged = false;
const nextState = {};
for (let i = 0; i < finalReducerKeys.length; i++) {
const key = finalReducerKeys[i];
const reducer = finalReducers[key];
const previousStateForKey = state[key];
const nextStateForKey = reducer(previousStateForKey, action);
if (typeof nextStateForKey === 'undefined') {
const errorMessage = getUndefinedStateErrorMessage(key, action);
throw new Error(errorMessage);
}
nextState[key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
return hasChanged ? nextState : state;
Gera um novo estado a partir
dos dados retornados pelo
reducer
Compara a referência em
memória do novo estado com o
estado anterior
Retorna o novo estado caso
seja um novo objeto

13. Reducer
function reducer(state = initialState, action) {
switch (action.type) {
case 'ADD_COUNTER':
return {
...state,
counter: state.counter + action.value
};
case SUB_COUNTER':
return {
...state,
counter: state.counter - action.value
};
default:
return state;
}
}
...state
=
{
counter: 0,
savedCounters: []
}

14. DATA FLOW
ACTION REDUCER STORE VIEW
DISPATCH

15. LIBS & STUFF
REACT
Renderização de
componentes
REACT-DOM
render – manipulação do
DOM
REDUX
Core, util para configurações da store e
separação de contextos dos reducers
REACT-REDUX
Utilizada para conectar componentes React na store
BABEL
Responsável por transpilar
es6 para es5

16. Reducer
/Action
const mapDispatchToProps = (dispatch) => ({
addCounter() {
dispatch({ type: 'ADD_COUNTER', value: 1 })
}
});
const initialState = { counter: 0 };
function counterReducer(state = initialState, action) {
switch(action.type) {
case 'ADD_COUNTER':
return {
...state,
counter: state.counter + action.value
};
default:
return state;
}
}

17. Store &
Middleware
import * as Redux from 'redux';
import createLogger from 'redux-logger';
import reducer from './modules/reducer';
const middlewares = [
createLogger()
];
export default function configureStore() {
return Redux.createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(),
Redux.applyMiddleware(...middlewares)
);
}

18. Rendering
ReactDOM.render(
<ReactRedux.Provider store={ reduxStore }>
<AppContainer />
</ReactRedux.Provider>,
document.getElementById('root'),
);

19. Container
component
class AppContainer extends React.Component {
render() {
return (
<App { ...this.props } />
);
}
}
const mapStateToProps = (state) => {
return (
state
);
}
const mapDispatchToProps = (dispatch) => ({
addCounter() {
dispatch({ type: 'ADD_COUNTER', value: 1 })
}
})
const AppContainer =
ReactRedux.connect(
mapStateToProps,
mapDispatchToProps)(AppContainer);

20. Presentional
component /
View
const App = (props) => {
return (
<div>
<div>{ props.counter }</div>
<button
onClick={() => props.addCounter() }
>
ADD
</button>
</div>
);
}

21. goo.gl/blaEbL goo.gl/avxvYe

22. REDUX DEVTOOLS
Time travel, TreeState chart
1

23. Obrigado!
Perguntas?
Twitter - @armandofreire
armandofreire.it@gmail.com
LinkedIn - @gtosta96
gabrieltosta3@gmail.com