Download to read offline
![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/75/State-management-in-a-GraphQL-era-45-2048.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/75/State-management-in-a-GraphQL-era-46-2048.jpg)
More Related Content
Similar to State management in a GraphQL era
State management in a GraphQL era
- 2.
- 3.
- 4.
- 5. Everything but arockstar
- 6. “He rocked thestage” 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 infront of 1.5m people
- 8. At the endof 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 aGraphQL era
- 14. TL;DR GraphQL is thething that’s eventually gonna replace REST, but you keep telling yourself that you don’t need to learn it.
- 15.
- 16. GraphQL query { currentUser { activity{ posts { title dateCreated } } friends { name avatarUrl activity { likedPosts { id imageUrl } } } } }
- 17. SPAs ruined everything 🤦 SPAsruined everything
- 18.
- 19. Data is the#1 reason why state management is hard
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. I love Redux Ihate Redux
- 28. “Hello Reddit 👋I just started my first React app. What should I use to do network requests?”
- 29.
- 30. Explaining Redux tosomeone 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 tosomeone
- 32.
- 33. jQuery vs MooTools Angularvs Ember GraphQL vs Rest Redux vs MobX React vs Vue Apollo vs Relay Hillary vs Trump
- 34. Mistake: Asking ❓what’s better❓ insteadof ✅ what’s suitable for my app ✅ what’s suitable for my team ✅ what’s suitable for our use-case
- 35. Trump is great… ona golf course.
- 36. HIGHER ORDER COMPONENTSSUCK !!!111 🤬
- 37. RENDER PROPZZ AREEVERYYTHINNGG <3 <3
- 38. HOW ABOUT AHEALTHY MIX? 🍏
- 39. WE NEED REDUXFOR EVERYTHING !!!!1111
- 40. REDUX IS DEAD☠ WE CAN JUST REPLACE IT WITH THE NEW CONTEXT RIGHHTTT GUISE??!111 🙄
- 41. HOW ABOUT AHEALTHY MIX? 🍏
- 42.
- 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 { @observabletodos = []; @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.
- 48. @graphql(gql` query { todos { title date } } `) classTodos 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 fixingthe sink instead of the well
- 50. the sink =state management the well = REST apis
- 51.
- 52.
- 54. Do we evenneed a state management library when using GraphQL?
- 55. 1. Vanilla 2. Ihate forms 3. My users live in tunnels 4. I wanna go home early 5. Next level 6. Apollo
- 56. - Apollo - Routerlibrary 🍦Vanilla - setState()
- 57. - Apollo - Routerlibrary 😡 I hate forms - Form library - setState()
- 58. - Apollo - Routerlibrary 🚅 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 level2.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 App2 App 4 App3 App5
- 63.
- 64.
- 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 amI to tell you what to do?!
- 68. I work alone Idon’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, andyour situation, before you follow other people’s advice
- 70. A client projectstory
- 71. Don’t be scaredof the network! Few kilobytes of data are better than your team spending weeks on overengineering things.
- 72. I used tooverengineer things in my past. Now I’m just trying to make my users happy 💜
- 73. 🖐 ✅ I madesomething ✅ It works and I think it’s awesome 😞 I’m not sure if it’s right
- 74.
- 75.
- 76.
- 77. A hospital website 🤦🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦 🤦
- 78. Don’t feel badfor not using the latest and greatest
- 79.
- 80. Stop seeking externalapproval 🙏 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 likewhat you’re doing and it works for you, please forget about this talk and move on.
- 82. ✅ kitze.io 😞 @thekitzeon Twitter ✅ @kitze on GitHub ✅ @kitze on Medium
- 83.