Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 1. Single Source of Truth { todos: [{ text: 'Eat

    food', completed: true }, { text: 'Exercise', completed: false }], visibilityFilter: 'SHOW_ALL' }
  2. 3. changes are made with pure functions function visibilityFilter(state, action)

    { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.payload default: return state } }
  3. 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;
  4. 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;
  5. 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;
  6. Action creator export const addTodo = (text) => ({ type:

    ADD_TODO, payload: text }) { type: 'ADD_TODO', payload: 'Build my first Redux app' }
  7. 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
  8. 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
  9. Reducers export default(state = initialState, action){ switch (action.type) { case

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

    API com reducer; realize operações de rota com reducer;
  11. 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();
  12. o que é? permite acesso ao estado através do store.getState();

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

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

    './todos'; export default combineReducers({ todos });
  17. actions export function openSidebar() { return { type: OPEN_SIDEBAR, };

    } export function closeSidebar() { return { type: CLOSE_SIDEBAR, }; }
  18. 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; } }
  19. actions // action type const LOGGED_USER = 'LOGGED_USER'; // action

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

    (action.type) { case LOGGED_USER: return { ...state, logged: action.payload }; default: return state; } };
  21. store import { createStore } from 'redux'; import actions from

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