How to integrate an observable object into MST

[yuluyi]

For example, I wan't to sync the state of react router to MST. I tried the way mobx-react-router does.

class Routing {
    @observable location?: LocationDescriptorObject
    history?: History 
    constructor(history: History) {
        this.history = history
        history.listen(this._updateLocation.bind(this))
        this._updateLocation(history.location)
    }

    @action
    _updateLocation(newState: LocationDescriptorObject) {
        this.location = newState
    }
    ...
}

const Store = types.model({
    routing: types.frozen
})

const history = createBrowserHistory()

const storeInstance = Store.create({
    routing: new Routing(history)
})

onSnapshot(storeInstance, snapshot => console.log(snapshot))

ReactDOM.render(
    <Provider store={storeInstance}>
        <Router history={history}>
            {...}
        </Router>
    </Provider>
)

The callback of onSnapshot will never be triggered. I think it's by design of types.frozen. But is there any way to allow an MST reacting to the state of react-router?

[mattiamanzati]

Hello! You cannot pass in classes in MST type definitions, and as said internal updates in frozen types will not trigger snapshots. You need to replace entirely the frozen property. Please try something like this! :)

// define the store
const Store = types.model({
    locationState: types.maybe(types.frozen)
}, {
    updateLocationState(newState){
      this.locationState = newState
    }
})

// create the router
const history = createBrowserHistory()
// create the store instance
const storeInstance = Store.create()
// hook them up
history.listen(newState => storeInstance.updateLocationState(newState))

onSnapshot(storeInstance, snapshot => console.log(snapshot))

ReactDOM.render(
    <Provider store={storeInstance}>
        <Router history={history}>
            {...}
        </Router>
    </Provider>
)

[yuluyi]

@mattiamanzati Got it. Thanks. Is there any plan to support observable classes in MST? So we can use mobx within MST.

[mattiamanzati]

It mostly probably wont, see #3 and #136 for motivations :)