MobX + React Native：注入存储的方式答案

【问题标题】：MobX + React Native : way to inject storesMobX + React Native：注入存储的方式
【发布时间】：2018-01-22 00:42:19
【问题描述】：

我正在尝试与 MobX 合作开展一个新项目。我于 2017 年 5 月开始使用它，一切运行良好。我不得不停下来，现在我继续开发它。我不得不创建一个npm install 来管理它的工作，但是现在，我在商店遇到了一些问题...... 我依赖这个 tutorial 的结构：https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

这是我的结构：

主索引.js

import { Provider } from 'mobx-react';
import Stack from './router';
import stores from './stores';

export default class App extends Component {

      render() {
        return (
          <Provider {...stores}>
            <Stack />
          </Provider>
        );
      }
    }

./stores/index.js 中我的商店的Index.js

import ChatStore from './ChatStore';
import UserStore from './UserStore';

export default {
  UserStore: new UserStore(),
  ChatStore: new ChatStore(),
};

./stores/UserStore.js（重要部分）

import { observer, inject } from 'mobx-react';
import {autobind} from 'core-decorators';
...
@inject(['ChatStore'])
@observer
@autobind
export default class UserStore {

  @observable isAuthenticated = false;
  @observable isConnecting = false;
  @observable user = null;
  @observable messages = [];
  @observable hasMoreMessages = false;
  @observable skip = 0;
...
login() {
    const payload = {
      strategy: 'local',
      material_id: DeviceInfo.getManufacturer(),
      password: DeviceInfo.getManufacturer()
    };
    return this.authenticate(payload);
  }
...

现在，对于组件部分：

Router.js

import { StackNavigator } from 'react-navigation';

import Home from './containers/Home';

const stackNavigatorConfig = {
  initialRouteName: 'Home',
};

export default StackNavigator({
  Home: {
    screen: Home,
  },
}, stackNavigatorConfig);

./containers/Home.js

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';

@inject('UserStore')
@observer
export default class Home extends Component {
  props: Props;
...
render() {
    this.props.UserStore.login().catch(error => {
       console.log('LOGIN', 'ERROR', JSON.stringify(error), error.message);
    });

   return {
    ...
   }
}

然后，我得到一个错误：

所以，我总结一下：

我使用 MobX 的 <Provider>，将我所有的商店提供给我的应用
然后，我使用 @inject 在我的组件中获得我想要的商店
我把它用作道具，使用this.props.UserStore... 但它不起作用。我依赖本教程的结构：https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

也许在 2017 年 5 月和今天之间有一个更新，这让事情变得不同......它在 2017 年 5 月运行良好。 我认为这是一个虚拟错误，但我找不到哪个...

【问题讨论】：

您是否尝试过从您的UserStore 班级中删除@inject(['ChatStore']) @observer @autobind？
John - 您最终找到解决问题的方法了吗？我遇到了完全相同的问题，但我的商店中没有自动绑定和观察者，所以我不知道该怎么办
实际上，在我使用 Provider 传递之前，我忘记实例化我的商店。以防其他人会犯同样的愚蠢错误

标签： javascript react-native mobx feathersjs mobx-react

【解决方案1】：

除了UserStore 类的装饰器之外，一切看起来都不错：@inject(['ChatStore']) @observer @autobind。 @inject(['ChatStore']) @observer 用于 React 组件，@autobind 可能仍按预期工作。

如果你删除它们应该可以工作。

【讨论】：

【解决方案2】：

也许值得使用来自 mobx 的 @action

【讨论】：