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在最初使用它时可能会感到痛苦。 但是这样可以减轻压力，您就可以开始:)。