MobX + React Native：注入商店的方式 [英] MobX + React Native : way to inject stores

问题描述

我正在尝试使用MobX进行新项目。
我是在2017年5月开始的，一切都运作良好。我不得不停下来，现在我继续开发它。我不得不做一个 npm install 来管理它的工作，但是现在，我对商店有一些问题...
我依靠这个教程结构：

所以，我总结一下：

1. 我从MobX使用< Provider> 到给我所有商店到我的应用


2. 然后，我使用 @inject


3. 获取我想要的商店。我将它用作道具，使用 this.props.UserStore ...
   但它不起作用。我依靠这个教程来构建结构： https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

也许2017年5月到今天之间有更新，这会让事情变得不同...... 2017年5月运作良好。
我认为这是一个假的错误，但我找不到哪一个...

解决方案

除了<$ c $上的装饰者外，一切看起来都不错c> UserStore class： @inject（['ChatStore']）@ observer @autobind 。 @inject（['ChatStore']）@ observer 用于React组件， @autobind 可能仍然按预期工作。

如果删除它们应该有效。

I'm trying to work with MobX for a new project. I started it on May 2017, and everything was working well. I had to stop, and now I go on developing it. I had to make an npm install to manage making it working, but now, I have some problem with stores... I rely on this tutorial for the structure : https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

This is my structure :

Main index.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>
        );
      }
    }

Index.js of my stores in ./stores/index.js

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

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

./stores/UserStore.js (important parts)

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

Now, for components part :

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 {
    ...
   }
}

And then, I get an error :

So, I sum up :

1. I use <Provider> from MobX, to give all my stores to my app
2. Then, I get the Store I want in my component with @inject
3. I use it as a props, using this.props.UserStore... But it does not work. I rely on this tutorial for the structure : https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

Maybe there was an update between May 2017 and today, that makes things different... It was working well on May 2017. I think this is a dummy error, but I can't find which one...

解决方案

Everything looks good except the decorators on your UserStore class: @inject(['ChatStore']) @observer @autobind. @inject(['ChatStore']) @observer is used on React components, @autobind might still work as intended.

It should work if you remove those.

这篇关于MobX + React Native：注入商店的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！