mobx與反應存儲沒有反映在觀察員

Question

與所有事情反應我試圖做一些簡單的，我猜我缺少一些明顯的配置明智所有我想要做的是採取一個REDX應用程序和實施mobx。

我的問題是，我試圖去的路線/用戶/ 12345

這家店是被稱爲 - 我正在從API獲取數據回來，但我發現除少數例外，首先是從mobx

An uncaught exception occurred while calculation your computed value, autorun or tranformer. Or inside the render().... In 'User#.render()' 

然後如有些預期null值的主持人，因爲RET的炸燬因爲店裏還沒有在店裏裝

Uncaught TypeError: Cannot read property 'name' of null 

然後本身之前 - 在我的用戶正在設置我已經加入到@Action被調用API，所以我不知道我已經有了搞砸商店功能的mobx例外

Uncaught(in promise) Error: [mobx] Invariant failed: It is not allowed to create or change state outside an `action` 

urned API /承諾我泡泡糖和大量的修復我寧願有一些反饋如何正確地做到這一點。謝謝。

UserStore.js

import userApi from '../api/userApi'; 
import {action, observable} from 'mobx'; 

class UserStore{ 
    @observable User = null; 

    @action getUser(userId){ 
     userApi.getUser(userId).then((data) => { 
     this.User = data; 
     }); 
    } 
} 

const userStore = new UserStore(); 
export default userStore; 
export{UserStore}; 

index.js

import {Router, browserHistory} from 'react-router; 
import {useStrict} from 'mobx'; 
import routes from './routes-mob'; 

useStrict(true); 
ReactDOM.render(
    <Router history={browserHistory} routes={routes}></Router>, 
    document.getElementById('app') 
); 

路由-mob.js

import React from 'react'; 
import {Route,IndexRoute} from 'react-router'; 
import App from './components/MobApp'; 
import UserDetail from './components/userdetail; 

export default(
    <Route name="root" path="/" component={App}> 
     <Route name="user" path="user/:id" component={UserDetail} /> 
    </Route> 
); 

MobApp.js

import React,{ Component } from 'react'; 
import UserStore from '../mob-stores/UserStore'; 

export default class App extends Component{ 
    static contextTypes = { 
     router: React.PropTypes.object.isRequired 
    }; 

    static childContextTypes = { 
     store: React.PropTypes.object 
    }; 

    getChildContext(){ 
     return { 
     store: { 
      user: UserStore 
     } 
     } 
    } 

    render(){ 
     return this.props.children; 
    } 

} 

.component/userdetail/index.js（容器？）

import React, {Component} from 'react'; 
import userStore from '../../mob-stores/UserStore'; 
import User from './presenter'; 

class UserContainer extends Component{ 
    static childContextTypes = { 
     store: React.PropTypes.object 
    }; 

    getChildContext(){ 
     return {store: {user: userStore}} 
    } 

    componentWillMount(){ 
     if(this.props.params.id){ 
     userStore.getUser(this.props.params.id); 
     } 
    } 

    render(){ 
     return(<User />) 
    } 
} 

export default UserContainer; 

.component/userdetail/presenter.js

import React, {Component} from 'react'; 
import {observer} from 'mobx-react'; 

@observer 
class User extends Component{ 
    static contextTypes = { 
     store: React.PropTypes.object.isRequired 
    } 

    render(){ 
     const {user} = this.context.store; 
     return(
      <div>{user.User.name}</div> 
    ) 
    } 
} 

原諒我，如果它的有點亂了我所拼湊如何從各種博客文章實現mobx以及文檔和堆棧溢出問題。我有一個很難找到湯到堅果的例子，不只是標準todoapp

UPDATE

基本上解決方法是@mweststrate答案的下面添加行動的承諾相結合響應

@action getUser(userId){ 
    userApi.getUser(userId).then(action("optional name", (data) => { 
    // not in action 
    this.User = data; 
    })); 

}

，它包括在主持人的檢查，我們其實有一些顯示

<div>{this.context.store.user.User ? this.context.store.user.User.name : 'nada' }</div> 

Answer 1

注意，下面的代碼不被動作保護：

@action getUser(userId){ 
     userApi.getUser(userId).then((data) => { 
     // not in action 
     this.User = data; 
     }); 
    } 

的action只有裝飾當前函數，但回調是一種反璞歸真的功能，所以改用：

@action getUser(userId){ 
     userApi.getUser(userId).then(action("optional name", (data) => { 
     // not in action 
     this.User = data; 
     })); 
    }