SatchelJS: State Management You Should Probably Check Out

What is SatchelJS and why should you check it out?

NOTE: This talk was given at in internal lunch and learn with a 10-15 minute format.

Transcript

1. SatchelJS SatchelJS State Management You Should Check Out A not-quite Lightning Talk 1
2. What the heck is What the heck is SatchelJS? SatchelJS? 2
3. Microsoft created Microsoft created SatchelJS to support SatchelJS to support their Office 365 their Office 365 rewrite in React. rewrite in React. 3
4. SatchelJS SatchelJS uses a slightly modified Flux implementation borrows some ideas from Redux is built on top of MobX 4
5. Flux Flux 1. Views send actions to the dispatcher. 2. The dispatcher sends actions to every store. 3. Stores send data to the views. 5
6. Redux Redux 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions 6
7. MobX MobX 1. Observable State 2. Reactions 3. Actions 7
8. SatchelJS SatchelJS 1. Type-safe by default 2. Supports managing multiple concurrent Stores 3. Leverages MobX Observables 8
9. Core Concepts Core Concepts 1. Store 2. Actions 3. Observers 4. Mutators 5. Orchestrators 9
10. Stores Stores House the state of your application Have a defined structure Are all technically part of one Global store 10
11. Actions Actions Send data to Mutator, Orchestrator, or combination thereof Are created using an actionCreator Can be dispatched at will 11
12. Observers Observers Allow MobX to notify Components of changes in the Store Automatically keeps Component in sync with the state of the Store 12
13. Mutators Mutators Listen for an Action Actually mutate the state in a Store Should not trigger any Actions or side effects 13
14. Orchestrators Orchestrators Connect to an external source Listen for an Action Can dispatch multiple Actions during their life cycle 14
15. Examples Examples 15 . 1
16. import { createStore } from 'satcheljs'; // this creates a Symbol that will be returned // when you call this method again export default createStore( 'todoStore', { todos: [] }, ); Creating a Store Creating a Store 15 . 2
17. import { action } from 'satcheljs'; export default action( 'ADD_TODO', (text: string) => ({ text: text }), ); Creating an Action Creating an Action 15 . 3
18. import { mutator } from 'satcheljs'; import todoStore form '../store'; import { ADD_TODO } from '../actions'; export default mutator(ADD_TODO, (actionMessage) => { const store = todoStore(); store.todos.push({ id: Math.random(), text: actionMessage.text, }); }; Creating a Mutator Creating a Mutator 15 . 4
19. import { action, orchestrator, dispatch } from 'satcheljs'; import { RECEIVE_TODOS, ADD_TODO } from '../actions'; export default orchestrator(RECEIVE_TODOS, async () => { // let's grab any todos our user has saved on our server await fetch(process.env.TODO_SERVER) .then(response => response.json()) .then(data => { data.forEach(todo => dispatch(ADD_TODO, todo) }) ; }; Creating an Orchestrator Creating an Orchestrator 15 . 5
20. import React, { Component } from 'react'; import { observer } from 'mobx-react'; import todoStore from '../store'; const mapTodos = todos => todos.map(todo => <li>{todo.text}</li>); @observer // if you're gonna use decorators, you have to use a Class // instead of a just a functional Component export default class TodoListComponent extends Component { private store = todoStore(); render() { const { todos } = this.store; return ( <ol> {mapTodos(todos)} </ol> ); } } Creating a Reactive Component Creating a Reactive Component 15 . 6
21. Why choose SatchelJS? Why choose SatchelJS? Simple: less boilerplate Performant: intelligent reactive updates Type-Safe: integrates directly with TypeScript 16
22. Are there any drawbacks? Are there any drawbacks? Documentation: There isn't a lot out there; like seriously, there is very little documentation Support: There appears to only be a handful of people at Microsoft who work on it and they are busy rewriting Outlook.com and Office365 with it Roadmap: There doesn't seem to be any clearly published roadmap or overall vision for the project and it's mostly just one Microsoft employee making updates 17
23. Fin. Fin. 18