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';

呈现登录表单：

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

在 LoginForm 中，我希望访问 "loggedIn" 可观察对象：

观察者

class LoginForm extends Component { / ... 

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

结果：undefined

想要的结果：false

为什么这不起作用？

我需要一个包装 LoginForm 组件的提供者吗？怎么会？

将我的整个包裹在 App.js 中的供应商与商店中也不起作用

Answer 1

我看不到你的全局存储实例 class

尝试

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 时，它可能会很痛苦。但随后它会缓解，你就可以开始了:)。

React-native MobX @observable 始终未定义

React-native MobX @observable is always undefined

javascript

react-native

mobx