Redux 101 - Speaker Deck

Slide 1

Slide 1 text

Redux 101

Slide 2

Slide 2 text

O que é? não é uma lib

Slide 3

Slide 3 text

O que é? não é uma lib não é react

Slide 4

Slide 4 text

O que é? não é uma lib não é react é e não é um plugin

Slide 5

Slide 5 text

– Profundo não? “É uma arquitetura para gerenciamento de estado em aplicações.”

Slide 6

Slide 6 text

Três principios aka 3p

Slide 7

Slide 7 text

1. Single Source of Truth { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: false }], visibilityFilter: 'SHOW_ALL' }

Slide 8

Slide 8 text

2. State is ready-only store.dispatch({ type: 'SET_VISIBILITY_FILTER', payload: 'SHOW_COMPLETED' });

Slide 9

Slide 9 text

3. changes are made with pure functions function visibilityFilter(state, action) { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.payload default: return state } }

Slide 10

Slide 10 text

h!ps://medium.com/@ramonvictor/"c-tac-toe-js-redux-pa!ern-in-plain- javascript-ﬀfe37f7c47a

Slide 11

Slide 11 text

Principais Conceitos

Slide 12

Slide 12 text

State

Slide 13

Slide 13 text

o que é? a representação do estado da aplicação em formato de objeto;

Slide 14

Slide 14 text

State const initialState = { todos: [] };

Slide 15

Slide 15 text

Actions

Slide 16

Slide 16 text

o que são? o único meio de se alterar a store;

Slide 17

Slide 17 text

o que são? o único meio de se alterar a store; contém uma propriedade type que indica o !po da ação a ser tomada;

Slide 18

Slide 18 text

o que são? o único meio de se alterar a store; contém uma propriedade type que indica o !po da ação a ser tomada; contém uma propriedade payload com o dado a ser enviado para a store;

Slide 19

Slide 19 text

o que são? o único meio de se alterar a store; contém uma propriedade type que indica o !po da ação a ser tomada; contém uma propriedade payload com o dado a ser enviado para a store; são simples objetos;

Slide 20

Slide 20 text

Action types const ADD_TODO = 'ADD_TODO';

Slide 21

Slide 21 text

Action creator export const addTodo = (text) => ({ type: ADD_TODO, payload: text }) { type: 'ADD_TODO', payload: 'Build my first Redux app' }

Slide 22

Slide 22 text

Action creator store.dispatch( addTodo('Build my first Redux app') );

Slide 23

Slide 23 text

Reducers

Slide 24

Slide 24 text

o que são? especiﬁcam como o state será atualizado quando você disparar as ac!ons

Slide 25

Slide 25 text

o que são? especiﬁcam como o state será atualizado quando você disparar as ac!ons pega o state anterior e uma ac!on e retorna o próximo estado

Slide 26

Slide 26 text

o que são? especiﬁcam como o state será atualizado quando você disparar as ac!ons pega o state anterior e uma ac!on e retorna o próximo estado devem ser funções puras

Slide 27

Slide 27 text

Reducers (previousState, action) => newState

Slide 28

Slide 28 text

Reducers export default(state = initialState, action){ switch (action.type) { case ADD_TODO: return { ...state, todos: [...state.todos, action.payload] } default: return state } }

Slide 29

Slide 29 text

nunca, mas nunca !! altere seus argumentos;

Slide 30

Slide 30 text

nunca, mas nunca !! altere seus argumentos; efetue chamadas para API com reducer;

Slide 31

Slide 31 text

nunca, mas nunca !! altere seus argumentos; efetue chamadas para API com reducer; realize operações de rota com reducer;

Slide 32

Slide 32 text

nunca, mas nunca !! altere seus argumentos; efetue chamadas para API com reducer; realize operações de rota com reducer; execute funções não puras: Math.random(), Date.now();

Slide 33

Slide 33 text

Store

Slide 34

Slide 34 text

o que é? permite acesso ao estado através do store.getState();

Slide 35

Slide 35 text

o que é? permite acesso ao estado através do store.getState(); permite que o estado seja atualizado u!lizando dispatch(ac!on);

Slide 36

Slide 36 text

o que é? permite acesso ao estado através do store.getState(); permite que o estado seja atualizado u!lizando dispatch(ac!on); só existe apenas uma store para toda a aplicação;

Slide 37

Slide 37 text

o que é? permite acesso ao estado através do store.getState(); permite que o estado seja atualizado u!lizando dispatch(ac!on); só existe apenas uma store para toda a aplicação; quando se precisa dividir o estado da aplicação, u!liza-se o combineReducers() ao invés de múl!plas stores;

Slide 38

Slide 38 text

Store import { createStore } from 'redux'; import actions from './actions'; const store = createStore( actions ); export default store;

Slide 39

Slide 39 text

Store import { combineReducers } from 'redux'; import todos from './todos'; export default combineReducers({ todos });

Slide 40

Slide 40 text

Arquitetura

Slide 41

Slide 41 text

1 2 3 4

Slide 42

Slide 42 text

Sidemoney template

Slide 43

Slide 43 text

Actions 1/3

Slide 44

Slide 44 text

actions export const OPEN_SIDEBAR = 'OPEN_SIDEBAR'; export const CLOSE_SIDEBAR = 'CLOSE_SIDEBAR';

Slide 45

Slide 45 text

actions export function openSidebar() { return { type: OPEN_SIDEBAR, }; } export function closeSidebar() { return { type: CLOSE_SIDEBAR, }; }

Slide 46

Slide 46 text

Reducers 2/3

Slide 47

Slide 47 text

reducers const initialState = { sidebarOpened: true };

Slide 48

Slide 48 text

reducers export default (state = initialState, action) { switch (action.type) { case OPEN_SIDEBAR: return Object.assign({}, state, { sidebarOpened: true, }); case CLOSE_SIDEBAR: return Object.assign({}, state, { sidebarOpened: false, }); default: return state; } }

Slide 49

Slide 49 text

Store 3/3

Slide 50

Slide 50 text

store const context = { store: configureStore( window.App.state, { history } ), storeSubscription: null, };

Slide 51

Slide 51 text

store // client.js

Slide 52

Slide 52 text

Financeiro

Slide 53

Slide 53 text

Actions 1/2

Slide 54

Slide 54 text

actions // initial state const initialState = { logged: false };

Slide 55

Slide 55 text

actions // action type const LOGGED_USER = 'LOGGED_USER'; // action creator export const loggedUser = (val) => ({ type: LOGGED_USER, payload: val });

Slide 56

Slide 56 text

actions export default (state = initialState, action) => { switch (action.type) { case LOGGED_USER: return { ...state, logged: action.payload }; default: return state; } };

Slide 57

Slide 57 text

Store 2/2

Slide 58

Slide 58 text

store import { createStore } from 'redux'; import actions from './actions'; const store = createStore( actions ); export default store;

Slide 59

Slide 59 text

store // actions/index.js import { combineReducers } from 'redux'; import login from './login'; import system from './system'; import dashboard from './dashboard'; export default combineReducers({ login, system, dashboard, });

Slide 60

Slide 60 text

Sidemoney CRUD