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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

December 12, 2017
Tweet

Transcript

  1. Redux 101

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

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

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

    é e não é um plugin
  5. – Profundo não? “É uma arquitetura para gerenciamento de estado

    em aplicações.”
  6. Três principios aka 3p

  7. 1. Single Source of Truth { todos: [{ text: 'Eat

    food', completed: true }, { text: 'Exercise', completed: false }], visibilityFilter: 'SHOW_ALL' }
  8. 2. State is ready-only store.dispatch({ type: 'SET_VISIBILITY_FILTER', payload: 'SHOW_COMPLETED' });

  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 } }
  10. h!ps://medium.com/@ramonvictor/"c-tac-toe-js-redux-pa!ern-in-plain- javascript-fffe37f7c47a

  11. Principais Conceitos

  12. State

  13. o que é? a representação do estado da aplicação em

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

  15. Actions

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

    store;
  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;
  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;
  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;
  20. Action types const ADD_TODO = 'ADD_TODO';

  21. Action creator export const addTodo = (text) => ({ type:

    ADD_TODO, payload: text }) { type: 'ADD_TODO', payload: 'Build my first Redux app' }
  22. Action creator store.dispatch( addTodo('Build my first Redux app') );

  23. Reducers

  24. o que são? especificam como o state será atualizado quando

    você disparar as ac!ons
  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
  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
  27. Reducers (previousState, action) => newState

  28. Reducers export default(state = initialState, action){ switch (action.type) { case

    ADD_TODO: return { ...state, todos: [...state.todos, action.payload] } default: return state } }
  29. nunca, mas nunca !! altere seus argumentos;

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

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

    API com reducer; realize operações de rota com reducer;
  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();
  33. Store

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

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

    permite que o estado seja atualizado u!lizando dispatch(ac!on);
  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;
  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;
  38. Store import { createStore } from 'redux'; import actions from

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

    './todos'; export default combineReducers({ todos });
  40. Arquitetura

  41. 1 2 3 4

  42. Sidemoney template

  43. Actions 1/3

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

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

    } export function closeSidebar() { return { type: CLOSE_SIDEBAR, }; }
  46. Reducers 2/3

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

  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; } }
  49. Store 3/3

  50. store const context = { store: configureStore( window.App.state, { history

    } ), storeSubscription: null, };
  51. store // client.js <App store={context.store} />

  52. Financeiro

  53. Actions 1/2

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

    };
  55. actions // action type const LOGGED_USER = 'LOGGED_USER'; // action

    creator export const loggedUser = (val) => ({ type: LOGGED_USER, payload: val });
  56. actions export default (state = initialState, action) => { switch

    (action.type) { case LOGGED_USER: return { ...state, logged: action.payload }; default: return state; } };
  57. Store 2/2

  58. store import { createStore } from 'redux'; import actions from

    './actions'; const store = createStore( actions ); export default store;
  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, });
  60. Sidemoney CRUD