1. setState
   Might be enough
2. Redux
   You get paid per hour?
3. MobX
   Stop the whitchcraft, heritic!
4. jquery.data + refs
   You are my true hero

const initialState = {name: "", done: false}
function todoReducer(state = initialState, action){
    if(!action) return state
    switch(action.type){
        case TOGGLE_TODO:
            return ({...state, done: !state.done})
        default:
            return state
    }
}

const TOGGLE_TODO = 'todo/TOGGLE_TODO'
export function toggleTodo(){
    return { type: TOGGLE_TODO }
}

class Todo {
    @observable name = ""
    @observable done = false
    @action toggle(){
        this.done != this.done
    }
}

const serverData = {
    name: "Visit the opera!",
    done: true
}

const newState = todoReducer(serverData, toggleTodo())
// newState.done === false

class Todo {
    // ...
    @computed get snapshot(){
        return {
            name: this.name,
            done: this.done
        }
    }
    @action applySnapshot(snapshot){
        this.name = snapshot.name
        this.done = snapshot.done
    }
}

• Allow time travel
• Make testing easier
• Better dev tools

• Describe the shape of the tree
• Runtime checking
• Designtime checking
• Composable & Extensible

• Enrich data
• Actions
• Views
• Local / private state
• Life cycle

• Can change own subtree
• Discoverable
• Bound

• Derived values
• Memoized. Fully reacty. Powered by MobX
• observer FTW

• Immutable
• Structurally shared
• Free
• Can be used to apply changes
  Reconciliation

import { onSnapshot, applySnapshot } from "mobx-state-tree"
const store = SomeModel.create()
const states = []
onSnapshot(store, snapshot => {
    states.push(snapshot)
})
function undo() {
    applySnapshot(store, states.pop())
}

1. Record patches and inverse apply them
   Like git revert
   
   
2. Record start state, rewind, replay all non-failing actions
   Like git rebase

• Monitor fine grained changes
• RFC-6902
• Transmission ready

// ... like Time Traveller
afterCreate() {
    const undoRedoMiddleware = createActionTrackingMiddleware({
        onStart: call => recordPatches(call.tree),
        onResume: (call, recorder) => recorder.resume(),
        onSuspend: (call, recorder) => recorder.stop(),
        onSuccess: (call, recorder) => {
            self.history.push({
                patches: recorder.patches,
                inversePatches: recorder.inversePatches
            })
        },
        onFail: (call, recorder) => recorder.undo()
    })
    addMiddleware(undoRedoMiddleware, targetStore)
}

function undo() {
    applyPatch(targetStore, self.history[--self.undoIdx].inversePatches)
}

• state → snapshot
• subscribe → onSnapshot
• dispatch → applyAction
• connect → observer

import {asReduxStore}
    from 'mobx-state-tree/middleware/redux'
const reduxStore = asReduxStore(store)