![// ApplicationStore.js
const defaultState = {list: [], loading: false};
export default function(state = defaultState, action) {
switch(action.type) {
default:
return state;
}
}
Redux
Initial reducer setup](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/75/making-react-part-of-something-greater-43-2048.jpg?cb=1669285959)
![// TalkStore.js
import {observable} from "mobx";
export const talks = observable({
list: [],
loading: false
});
MobX
Initial observable setup](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/75/making-react-part-of-something-greater-44-2048.jpg?cb=1669285959)
![// MyComponent.js
dispatch(loadTalksAction());
// TalkActions.js
async function loadTalksAction() {
dispatch({name: TALK_LIST_LOAD});
const talks = await loadTalks();
dispatch({name: TALK_LIST_LOADED, talks});
}
// TalkReducer.js
case TALK_LIST_LOAD:
return {...state, list: [], loading: true};
case TALK_LIST_LOADED:
return {...state, list: action.talks, loading: true};
Redux
Load a list of items (redux-thunk)](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/75/making-react-part-of-something-greater-46-2048.jpg?cb=1669285959)
![// MyComponent.js
selectTalkAction(this.props.talk);
// TalkActions.js
function selectTalkAction(talk) {
talk.selected = true;
}
// TalkStore.js
import {computed} from ’mobx’;
export const talks = observable({
list: [],
loading: false,
@computed get selected() {
return this.list.filter((item) => item.selected);
}
});
MobX
Choose a talk](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/75/making-react-part-of-something-greater-50-2048.jpg?cb=1669285959)
![import {useStrict} from "mobx";
useStrict(true);
// In a random place
function selectTalkAction(talk) {
talk.selected = true;
}
// [mobx] Invariant failed: It is not allowed to create or
change state outside an `action` when MobX is in strict
mode. Wrap the current method in `action` if this state
change is intended
// TalkActions.js
@action function selectTalkAction(talk) {
talk.selected = true;
}
MobX
useStrict](https://image.slidesharecdn.com/makingreactpartofsomethinggreater-161031165748/75/making-react-part-of-something-greater-52-2048.jpg?cb=1669285959)
Making react part of something greater
•0 likes•1,060 views
Report
Share
Download to read offline
Webcamp Zagreb, 2016 React is a great view layer, but what about the rest of the app structure? React is a great view layer, but if you want to create something more than a simple TODO app, you’ll need some other parts. First of, you’ll need a data structure and a way to handle the changes in it. Although the most simple way to do it could be to take parts of a framework you’re used to (e.g. Backbone Collections/Models), there is something better out there. First, there was the Flux architecture, made by Facebook itself - it forced us to change and consume our data in a certain way in order to prevent developers from shooting themselves in the foot. Then there was Redux - a state container that preaches immutability and time travel. While Redux is great, and enables us great things like hot module reloading, it is also very strict and introduces a lot of boilerplate code. MobX, on the other side, has almost no boilerplate code, can be strict when/if you want it to be, and gives you a nice performance boost for free. https://2016.webcampzg.org/talks/view/making-react-part-of-something-greater/
More Related Content
What's hot
What's hot(20)
Similar to Making react part of something greater
Similar to Making react part of something greater(20)
Recently uploaded
Recently uploaded(20)
Making react part of something greater
- 1. Making React part of something greater DARKO KUKOVEC JS TEAM LEAD @ INFINUM @DarkoKukovec
- 2. WHAT AM I TALKING ABOUT? • React
- 3. WHAT AM I TALKING ABOUT? • React • React state management libs • Comparison of two libs
- 4. WHAT AM I TALKING ABOUT? • React • React state management libs • Comparison of two libs • Biased?
- 5. 01REACT
- 6. REACT • Facebook • Not a framework
- 7. REACT - THE WEIRD PARTS • JSX?!? • Different way of thinking • Component state
- 8. REACT - THE GOOD PARTS • Virtual DOM • Think about the end goal, not about the journey • You render the final state • React takes care of the actual changes • Efficient
- 9. REACT • Component = View + UI State + Event handling Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
- 11. STATE MANAGEMENT • React - Encapsulated UI Components • Application State & Business logic? STATE MANAGEMENT Source: https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec
- 12. DIY STATE MANAGEMENT • OK for basic use cases? • Model objects • Services
- 13. DIY STATE MANAGEMENT • How to (efficiently) rerender component on data change? • setState is tricky
- 14. DIY STATE MANAGEMENT • How to (efficiently) rerender component on data change? • setState is tricky • Standards… Source: https://xkcd.com/927/
- 15. MRC - MODEL-REACT-CONTROLLER • e.g. Replace Backbone views with components • http://todomvc.com/examples/react-backbone/ • Backbone mutable by nature -> Bad for React perf • Legacy codebase?
- 16. FLUX
- 17. FLUX • Facebook, 2014 • Unidirectional architecture • Data down, actions up
- 18. FLUX • Data down, actions up Source: http://fluxxor.com/what-is-flux.html
- 19. FLUX • Data down, actions up Source: http://fluxxor.com/what-is-flux.html
- 20. FLUX • Store • Business logic + Application state • Only one allowed to change application state • All actions synchronous • Async operations trigger actions on state change
- 21. REDUX
- 22. REDUX • Single store (with nesting) • Application state • UI State • Reducers • Business logic • Responsible for one part of the store • Immutable state
- 26. REDUX • Time travel • Redux Dev Tools Source: https://github.com/gaearon/redux-devtools-dock-monitor
- 27. REDUX • A lot of boilerplate code • Async actions very verbose
- 28. MOBX
- 30. MOBX - UPDATES • Observers & computed values notified only on relevant changes • Topic for another talk
- 31. MOBX • Faster than Redux • Redux - component render on (sub)store update • MobX - component render on specific property update
- 32. MOBX VS. REDUX PERFORMANCE Source: https://twitter.com/mweststrate/status/718444275239882753
- 33. MOBX VS. REDUX PERFORMANCE Source: https://twitter.com/mweststrate/status/718444275239882753 Time in ms
- 34. MOBX • Decorators • @observable • @calculated • @action • etc. • TypeScript or Babel • Not a requirement!
- 36. RELAY • Facebook • GraphQL - API query language
- 37. RXJS • not intended for this • can mimic Redux • “Observable states”
- 38. 03REDUX VS. MOBX
- 39. REDUX VS. MOBX Redux Faster Flexible MobX Bigger community Better Dev Tools
- 40. REDUX VS. MOBX Redux Faster Less boilerplate Flexible MobX Bigger community Better Dev Tools Less magic Source: https://twitter.com/phillip_webb/status/705909774001377280
- 41. EXAMPLE TIME! Conference app Load & choose talks
- 42. Setup
- 43. // ApplicationStore.js const defaultState = {list: [], loading: false}; export default function(state = defaultState, action) { switch(action.type) { default: return state; } } Redux Initial reducer setup
- 44. // TalkStore.js import {observable} from "mobx"; export const talks = observable({ list: [], loading: false }); MobX Initial observable setup
- 45. Load data
- 46. // MyComponent.js dispatch(loadTalksAction()); // TalkActions.js async function loadTalksAction() { dispatch({name: TALK_LIST_LOAD}); const talks = await loadTalks(); dispatch({name: TALK_LIST_LOADED, talks}); } // TalkReducer.js case TALK_LIST_LOAD: return {...state, list: [], loading: true}; case TALK_LIST_LOADED: return {...state, list: action.talks, loading: true}; Redux Load a list of items (redux-thunk)
- 47. // MyComponent.js loadTalksAction(); // TalkActions.js async function loadTalksAction() { talks.loading = true; talks.list = await loadTalks(); talks.loading = false; } MobX Load a list of items
- 48. Modify data
- 49. // MyComponent.js dispatch(selectTalkAction(this.props.talk)); // TalkActions.js function selectTalkAction(talk) { return {name: TALK_SELECT, talk.id}; } // TalkReducer.js case TALK_SELECT: return { ...state, list: state.list.map((item) => { if (item.id === action.talk.id) return {...item, selected: true}; else return item; }), loading: false }; Redux Choose a talk
- 50. // MyComponent.js selectTalkAction(this.props.talk); // TalkActions.js function selectTalkAction(talk) { talk.selected = true; } // TalkStore.js import {computed} from ’mobx’; export const talks = observable({ list: [], loading: false, @computed get selected() { return this.list.filter((item) => item.selected); } }); MobX Choose a talk
- 51. MobX useStrict
- 52. import {useStrict} from "mobx"; useStrict(true); // In a random place function selectTalkAction(talk) { talk.selected = true; } // [mobx] Invariant failed: It is not allowed to create or change state outside an `action` when MobX is in strict mode. Wrap the current method in `action` if this state change is intended // TalkActions.js @action function selectTalkAction(talk) { talk.selected = true; } MobX useStrict
- 53. 04ENOUGH ABOUT MOBX, LET’S TALK ABOUT MOBX
- 54. MOBX DEVTOOLS • 3 options • Redraws
- 55. MOBX DEVTOOLS • 3 options • Redraws • Dependencies
- 56. MOBX DEVTOOLS • 3 options • Redraws • Dependencies • Actions/reactions
- 57. RELATED PROJECTS • React bindings • React Native bindings • Meteor bindings • Firebase • Routers, models, forms, loggers, etc.
- 58. <3 OPEN SOURCE • https://github.com/infinum • react-mobx-translatable • mobx-keys-store • mobx-jsonapi-store • mobx-form-store (soon)
- 59. RESOURCES • http://mobxjs.github.io/mobx/ • https://mobxjs.github.io/mobx/getting-started.html • https://medium.com/@mweststrate/object-observe-is-dead-long- live-mobservable-observe-ad96930140c5 • https://medium.com/@mweststrate/3-reasons-why-i-stopped- using-react-setstate-ab73fc67a42e
- 60. SHOULD YOU USE MOBX?
- 61. IT DEPENDSTM
- 62. Thank you! DARKO@INFINUM.CO @DARKOKUKOVEC Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum JOIND.IN joind.in/talk/bdddf darko.im
- 63. Any questions? DARKO@INFINUM.CO @DARKOKUKOVEC Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum JOIND.IN joind.in/talk/bdddf darko.im