$30 off During Our Annual Pro Sale. View Details »

Redux 101

Redux 101

Apresentação sobre os principais conceitos por trás da arquitetura do Redux, e em como você pode utilizar em conjunto com o React.

Thulio Philipe

December 12, 2017
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

  1. Redux
    101

    View Slide

  2. O que é?
    não é uma lib

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. Três principios
    aka 3p

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. Principais
    Conceitos

    View Slide

  12. State

    View Slide

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

    View Slide

  14. State
    const initialState = {
    todos: []
    };

    View Slide

  15. Actions

    View Slide

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

    View Slide

  17. 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;

    View Slide

  18. 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;

    View Slide

  19. 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;

    View Slide

  20. Action types
    const ADD_TODO = 'ADD_TODO';

    View Slide

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

    View Slide

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

    View Slide

  23. Reducers

    View Slide

  24. o que são?
    especificam como o state será atualizado quando você
    disparar as ac!ons

    View Slide

  25. o que são?
    especificam 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

    View Slide

  26. o que são?
    especificam 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

    View Slide

  27. Reducers
    (previousState, action) => newState

    View Slide

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

    View Slide

  29. nunca, mas nunca !!
    altere seus argumentos;

    View Slide

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

    View Slide

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

    View Slide

  32. 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();

    View Slide

  33. Store

    View Slide

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

    View Slide

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

    View Slide

  36. 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;

    View Slide

  37. 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;

    View Slide

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

    View Slide

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

    View Slide

  40. Arquitetura

    View Slide

  41. 1
    2 3 4

    View Slide

  42. Sidemoney
    template

    View Slide

  43. Actions
    1/3

    View Slide

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

    View Slide

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

    View Slide

  46. Reducers
    2/3

    View Slide

  47. reducers
    const initialState = {
    sidebarOpened: true
    };

    View Slide

  48. 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;
    }
    }

    View Slide

  49. Store
    3/3

    View Slide

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

    View Slide

  51. store
    // client.js

    View Slide

  52. Financeiro

    View Slide

  53. Actions
    1/2

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. Store
    2/2

    View Slide

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

    View Slide

  59. 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,
    });

    View Slide

  60. Sidemoney
    CRUD

    View Slide