![const todosReducer = (
state = {loading: false, todos: [], error: null},
action
) => {
switch (action.type) {
case 'FETCH_TODOS_INIT': {
return { ...state, loading: true};
}
case 'FETCH_TODOS_SUCCESS': {
return { ...state, loading: false, todos: action.todos};
}
case 'FETCH_TODOS_FAIL': {
return { ...state, loading: false, error: action.error};
}
}
};
Redux - reducer](https://image.slidesharecdn.com/rctfest-180315172840/85/State-management-in-a-GraphQL-era-45-320.jpg)
![class App {
@observable todos = [];
@observable loading = false;
@observable error = null;
@action fetchTodos = () => {
this.loading = true;
api.fetchTodos().then(todos => {
this.todos = todos;
this.loading = false;
}).catch(error => {
this.error = error;
this.loading = false;
});
}
}
MobX](https://image.slidesharecdn.com/rctfest-180315172840/85/State-management-in-a-GraphQL-era-46-320.jpg)
State management in a GraphQL era
- 2. smoosh
- 4. Rockstar
- 5. Everything but a rockstar
- 6. “He rocked the stage” He read his notes from a made-on-a-plane slides trembling for 30 minutes while praying that people won't out he’s a fraud
- 7. Rolling Stones in front of 1.5m people
- 8. At the end of the day we're all code monkeys trying to make weird libraries work together by writing shitty hacks 🙈 🙉 🙊
- 9. I am Kitze $👋 (A Rockstar Senior Ninja Developer)
- 10. I am Kitze $ 👋 💖 Open Source 💖 Making products 💖 Frontend
- 11. React, React Native, Redux, MobX, GraphQL, Apollo, CSS, css-in-js, etc. reactacademy.io
- 12. const loginToMac = ({user, password}) => { return user === 'root' && password === ''; } Login in High Sierra
- 13. State management in a GraphQL era
- 14. TL;DR GraphQL is the thing that’s eventually gonna replace REST, but you keep telling yourself that you don’t need to learn it.
- 15. REST /api/currentUser/activity /api/currentUser/friends /api/user/5/activity /api/user/5/likedPosts
- 16. GraphQL query { currentUser { activity { posts { title dateCreated } } friends { name avatarUrl activity { likedPosts { id imageUrl } } } } }
- 17. SPAs ruined everything 🤦 SPAs ruined everything
- 19. Data is the #1 reason why state management is hard
- 21. jQuery
- 22. JustAngular™
- 23. React
- 24. /api/posts /api/posts/1 /api/user/info Trying to be too smart
- 25. Redux
- 26. I love Redux I hate Redux
- 28. “Hello Reddit 👋 I just started my first React app. What should I use to do network requests?”
- 30. Explaining Redux to someone Right now, there is a poor soul trying to connect redux-saga with redux-form just to make a frickin’ login form
- 31. Explaining Redux to someone
- 32. MobX
- 33. jQuery vs MooTools Angular vs Ember GraphQL vs Rest Redux vs MobX React vs Vue Apollo vs Relay Hillary vs Trump
- 34. Mistake: Asking ❓what’s better❓ instead of ✅ what’s suitable for my app ✅ what’s suitable for my team ✅ what’s suitable for our use-case
- 35. Trump is great… on a golf course.
- 36. HIGHER ORDER COMPONENTS SUCK !!!111 🤬
- 37. RENDER PROPZZ ARE EVERYYTHINNGG <3 <3
- 38. HOW ABOUT A HEALTHY MIX? 🍏
- 39. WE NEED REDUX FOR EVERYTHING !!!!1111
- 40. REDUX IS DEAD ☠ WE CAN JUST REPLACE IT WITH THE NEW CONTEXT RIGHHTTT GUISE??!111 🙄
- 41. HOW ABOUT A HEALTHY MIX? 🍏
- 42. Examples
- 43. fetch('api/todos').then(function(response) { return response.json(); }).then(function(todos) { console.log(todos); }); Fetch
- 44. const fetchTodos = () => dispatch => { dispatch({type: 'FETCH_TODOS_INIT'}); api.fetchTodos().then(todos => { dispatch({type: 'FETCH_TODOS_SUCCESS', todos}); }).catch(error => { dispatch({type: 'FETCH_TODOS_FAIL', error}) }) }; Redux - async action
- 45. const todosReducer = ( state = {loading: false, todos: [], error: null}, action ) => { switch (action.type) { case 'FETCH_TODOS_INIT': { return { ...state, loading: true}; } case 'FETCH_TODOS_SUCCESS': { return { ...state, loading: false, todos: action.todos}; } case 'FETCH_TODOS_FAIL': { return { ...state, loading: false, error: action.error}; } } }; Redux - reducer
- 46. class App { @observable todos = []; @observable loading = false; @observable error = null; @action fetchTodos = () => { this.loading = true; api.fetchTodos().then(todos => { this.todos = todos; this.loading = false; }).catch(error => { this.error = error; this.loading = false; }); } } MobX
- 47. GraphQL
- 48. @graphql(gql` query { todos { title date } } `) class Todos extends Component { render(){ const {data: {loading, todos}} = this.props; {loading ? <div> loading ... </div> : <ul> {todos.map(todo => <li>{todo.title} - {todo.date} </li>)} </ul>} } } GraphQL
- 49. We were fixing the sink instead of the well
- 50. the sink = state management the well = REST apis
- 54. Do we even need a state management library when using GraphQL?
- 55. 1. Vanilla 2. I hate forms 3. My users live in tunnels 4. I wanna go home early 5. Next level 6. Apollo
- 56. - Apollo - Router library 🍦Vanilla - setState()
- 57. - Apollo - Router library 😡 I hate forms - Form library - setState()
- 58. - Apollo - Router library 🚅 My users live in tunnels - apollo-cache-persist
- 59. - Apollo - MobX 🏡 I wanna go home early - mobx-router - mobx-react-form
- 60. - Apollo - Next.js 🔺 Next level - setState()
- 61. 🔺 Next level 2.0 Use full page reloads when navigating between routes Treat every route as a separate mini-app 😱
- 62. / /about /products /product/123 /cart App 1 App 2 App 4 App3 App5
- 63. Only Apollo?
- 65. @graphql(gql` query { todos { title completed date } counter @client } `) class Todos extends Component { render() { } }
- 66. When using GraphQL, in 90% of the cases, you won’t need Redux, MobX, sagas, observables, RxJS or *insert hipster state-management library here*
- 67. But who am I to tell you what to do?!
- 68. I work alone I don’t work for clients I experiment with a new library every week I don’t know what I’m doing I’ll make a Christmas tree out of this slide
- 69. Evaluate the context, and your situation, before you follow other people’s advice
- 70. A client project story
- 71. Don’t be scared of the network! Few kilobytes of data are better than your team spending weeks on overengineering things.
- 72. I used to overengineer things in my past. Now I’m just trying to make my users happy 💜
- 73. 🖐 ✅ I made something ✅ It works and I think it’s awesome 😞 I’m not sure if it’s right
- 74. What is “right”?
- 77. A hospital website 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦
- 78. Don’t feel bad for not using the latest and greatest
- 80. Stop seeking external approval 🙏 Stop seeking answers in other people’s projects 👪 Stop feeling insecure about your code because nobody actually knows what they’re doing 😕 For God’s sake delete your Twitter account 🙅
- 81. If you like what you’re doing and it works for you, please forget about this talk and move on.
- 82. ✅ kitze.io 😞 @thekitze on Twitter ✅ @kitze on GitHub ✅ @kitze on Medium