xerios / mobx-isomorphic-starter Goto Github PK

like react-router's onEnter, you can have 'replace'
how to achieve that in this project?

what is the difference?

Is there a way to handle mobx actions with this setup? Right now when I see my store I can only spot my observables. When I try access my actions on the store they are undefined.

PS Awesome project. This starter has been a huge help for getting my app bootstrapped. Thank you.

in Browse.jsx
if i remove @action,just
static fetchData({state, actions, query})

it still works well
So what's the necessary with using @action?

Thanks a lot

If there is a fetchData in App.jsx, and there is another fetchData in About.jsx

In App.jsx

@action static fetchData({state}){
  setTimeout(() => {
    console.log('a')
  }, 1000)
}

In About.jsx

@action static fetchData({state}){
    console.log('b')
    state.app.title = 'About'
}

In this situation, it will console 'b' first, and 'a' next.
But I want to console 'a' first, and 'b' next.

Really hope to get your help，thx~

Hi,

I'm pretty new to React, and MobX. I found this starter-project, every so clear and i really like it.

I trying to create some small thing to learn like a Timer.

I created 2 file

/src/client/containers/pages/Timer/store.js

import { observable, action, autorun } from 'mobx';

class TimerStore {
  @observable counter = 0;
}

const store = new TimerStore;

export default store;

/src/client/containers/pages/Timer/Timer.js

import React from 'react'
import { inject, observer } from 'mobx-react'

@observer(["state","store"])
export default class Timer extends React.Component {
    static fetchData({state, store}){
        state.app.title = 'Timer'
    }
    render() {
        return <section>
            <h1>Timer</h1>
            <p>{this.props.store.timerStore.counter}</p>
        </section>
    }
}

/src/client/routes.js
Add a new route

<Route path="timer" getComponent={requireAsync('Timer/Timer')}/>

Import store to client
/src/client/index.js

...

import { store as timerStore } from './containers/pages/Timer/store'

// Import our styles
require('./assets/css/index.scss')

// Initialize stores & inject server-side state into front-end
const state = createState(window.__STATE)
const store = {timerStore}

...

I got this error from Browser
400: An error has occured : TypeError: Cannot read property 'counter' of undefined

And this error from console
[mobx] An uncaught exception occurred while calculating your computed value, autorun or transformer. Or inside the render() method of an observer based React component. These functions should never throw exceptions as MobX will not always be able to recover from them. Please fix the error reported after this message or enable 'Pause on (caught) exceptions' in your debugger to find the root cause. In: 'Timer#0.render()'. For more details see https://github.com/mobxjs/mobx/issues/462

What did i do wrong and how to make it right. Thanks!