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.

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