Mobx Performance and Sanity

  • View
    99

  • Download
    0

Embed Size (px)

Text of Mobx Performance and Sanity

  1. 1. MobX - Performance and Sanity Adam Klein CTO @ 500Tech
  2. 2. Filters Todos Count Todo List Actions Filter ItemTodo Item AppComponents Stores Filtered Todos Current Filter Todo Store Add Todo
  3. 3. Performant Cached Calculations React to Changes Trackable, Debuggable MobX
  4. 4. Performant Cached Calculations React to Changes Trackable, Debuggable Redux
  5. 5. SubscribeAction Redux Reducer Component
  6. 6. Boilerplate [TodoActions.SET_TODO_STATUS]: (state, action) => ...state, todos: state.todos.map(todo => { return (todo.id !== action.payload.id) ? todo : { ...todo, completed: action.payload.completed }; }) }),
  7. 7. Plain Objects @observable completed = false; @action setStatus(value) { this.completed = value; }
  8. 8. Plain Objects @observable completed = false; @action setStatus(value) { this.completed = value; }
  9. 9. Async Operations
  10. 10. Use Promises @action submitForm(obj) { this.setIsLoading(true); this.api.sendObject(obj) .then((res) => { this.setIsLoading(false); this.closeModal(); }) .catch((error) => { this.setIsLoading(false); this.notify(error); }); }
  11. 11. Computed @computed get filteredItems() { return this.filter === 'All' ? this.todos : this.todos.filter( (todo) => this.filter === Completed ? todo.completed : !todo.completed ); }
  12. 12. Computed @computed get filteredItems() { return this.filter === 'All' ? this.todos : this.todos.filter( (todo) => this.filter === Completed ? todo.completed : !todo.completed ); }
  13. 13. Redux Selectors using reselect Explicit dependencies
  14. 14. Redux SubscribeAction Reducer Middleware Selector Component
  15. 15. Distributed Flow
  16. 16. Angular https://github.com/mobxjs/mobx-angular
  17. 17. export class AppComponent { constructor(private todos: Todos) {} } Inject Store
  18. 18. Template
    • {{ todo.title }}
  19. 20.