To share the best practice of data management in mobx

1. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 1/32
MOBX REACTMOBX REACT

2. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 2/32
MobX
MobX React
MobX React

3. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 3/32

4. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 4/32
MOBX ?MOBX ?
MobX

5. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 5/32
MOBXMOBX
State - ( )
Derivations -
Actions -

6. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 6/32
DERIVATIONS -DERIVATIONS -
ComputedValue -
Reactions -

7. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 7/32

8. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 8/32
MOBX REACTMOBX REACT
MobX

9. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 9/32
- . (
user.name) [] ( user['name'])
- computed observer
render() when reaction autorun
(during)
observable

10. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 10/32
MOBX REACTMOBX REACT

11. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 11/32
MOBX STOREMOBX STORE
Store?
Store?

12. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 12/32
class domainStore {
@observable domainState1 = '';
@boservable domainState2 = '';
fetchData(){
promise.then(()=>{
runInAction(()=>{
this.domainState1 = 'sth';
});
});
}
}

13. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 13/32

14. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 14/32
STORE?STORE?
RootStore

15. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 15/32

16. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 16/32

17. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 17/32

18. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 18/32

19. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 19/32

20. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 20/32
Store
Store

21. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 21/32

22. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 22/32
STORESTORE

23. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 23/32

24. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 24/32
STORE ACTIONSTORE ACTION

25. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 25/32

26. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 26/32

27. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 27/32

28. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 28/32
react ux

29. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 29/32

30. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 30/32
MOBXMOBX
State - ( )
Derivations -
Computed value -
Reactions -
Actions -

31. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 31/32
MOBX REACTMOBX REACT
Store
Action Store

32. 9/2/2018 reveal-md
http://localhost:1948/ppt/mobx_best_practice/mobx_best_practice.md?print-pdf#/ 32/32
Q & AQ & A