リアクトネイティブMobXの@observableは常に未定義

Question

メイン App.js続く

globalStore.js

import {observable} from 'mobx'; 

export default class globalStore { 
    @observable loggedIn = false; 
} 

です：loginFormをレンダリング

import LoginForm from './src/components/LoginForm'; 
import { observer } from 'mobx-react'; 
import globalStore from './src/store/globalStore'; 

：LoginFormで

 return (
      <LoginForm store={globalStore} /> 
    ); 

、私がアクセスしたいです"loggedIn"が観測可能：

オブザーバー

class LoginForm extends Component {/... 

render() { 
     console.log(this.props.store.loggedIn); 

結果：undefined

望ましい結果：false

なぜこれが動作しませんか？

LoginFormコンポーネントをラップするプロバイダが必要ですか？どうして？

ストアとプロバイダにApp.jsで私の全体をラッピングする

Answer 1

を、それをインスタンス化することができますこと。私は、このようにそれをやった：

class GlobalStore { 
    @observable loggedin = false; 
    ... 
} 

const store = new GlobalStore(); 
export default store; 

その後、あなたは、プロバイダを使用する必要があります。

import GlobalStore from './path/to/stores/GlobalStore'; 

<Provider 
    globalStore={GlobalStore} 
> 
    <AppRelatedContainers /> 
</Provider> 

最後にあなたがログインフォームでお店を注入する必要があります

@inject('globalStore') 
class LoginForm extends Component { 
... 

    render() { 
    console.log(this.props.globalStore.loggedIn); 
    ... 
    } 

これらのステップにより、あなたがしなければなりません作業上の解決策に終わります。私はMobXが最初にそれを使って作業するとき、MobXがお尻に痛むことがあることを知っています。しかし、その後それは楽になり、あなたは行くのが良いです:)。

Answer 2

いずれも動作しません。私はあなたのグローバルストアクラスのインスタンス

は、ログインフォーム、その後

import {observable} from 'mobx'; 

class globalStore { 
    @observable loggedIn = false; 
} 
const global_store=new globalStore(); // as a singleton class 
export default global_store; 

を試す見ることができません以下のようになります

return (
      <LoginForm store={global_store} /> 
    ); 

まず、あなたのGlobalStoreから新しいストアを作成する必要があります：あなたは同様にあなたのログインフォーム上で、私は私が働い実装で異なっやってきた私の視点からいくつかのことがあると思い