React-native MobX @observable始終未定義

Question

globalStore.js

import {observable} from 'mobx';

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

其次是主要App.js ：

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

呈現loginForm：

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

在LoginForm ，我希望訪問可觀察到的“ loggedIn”：

觀察者

class LoginForm extends Component { / ... 

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

結果： undefined

所需結果： false

為什么這不起作用？

我是否需要提供程序來包裝LoginForm組件？ 怎么會？

在商店的Provider App.js我的全部包裹在App.js中也不起作用

Answer 1

我看不到您的全局商店類的實例

嘗試

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} />
      );

或者也可以在您的登錄表單上實例化它

Answer 2

從我的角度來看，我認為對於有效的實現我所做的事情有所不同：

首先，您需要從GlobalStore創建新商店。 我這樣做是這樣的：

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在最初使用它時可能會感到痛苦。 但是這樣可以減輕壓力，您就可以開始:)。