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
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