onAction(shop, () => console.log('some action occurred'))
However, when app is starting i receive error message when go throughout navigation:
Uncaught Error: Argument 0 that was passed to action 'openBooksPage' should be a primitive, model object or plain object, received a SyntheticMouseEvent
Complete index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'
import { reaction } from 'mobx'
import createRouter from './utils/router'
import App from './components/App'
import './index.css'
import { getSnapshot, onAction } from 'mobx-state-tree';
import { ShopStore } from './stores/ShopStore'
const fetcher = url => window.fetch(url).then(response => response.json())
const shop = ShopStore.create({}, {
fetch: fetcher,
alert: m => window.alert(m)
})
window.shop = shop // for playing around
ReactDOM.render(
,
document.getElementById('root')
)
onAction(shop, () => console.log('some action occurred'))
reaction(
() => shop.view.currentUrl,
(path) => {
if (window.location.pathname !== path)
window.history.pushState(null, null, path)
}
)
const router = createRouter({
"/book/:bookId": ({bookId}) => shop.view.openBookPageById(bookId),
"/cart": shop.view.openCartPage,
"/": shop.view.openBooksPage
})
window.onpopstate = function historyChange(ev) {
if (ev.type === "popstate")
router(window.location.pathname)
}
router(window.location.pathname)