MobX + React Native: способ внедрения магазинов

Я пытаюсь работать с MobX над новым проектом. Я запустил его в мае 2017 года, и все работало хорошо. Мне пришлось остановиться, и теперь я продолжаю это развивать. Мне пришлось сделать npm install, чтобы заставить его работать, но теперь у меня проблемы с магазинами ... Я полагаюсь на этот учебник для структуры: https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

Это моя структура:

Основной 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 моих магазинов в ./stores/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 {
    ...
   }
}

И затем я получаю сообщение об ошибке:  Ошибка

Итак, резюмирую:

  1. Я использую <Provider> из MobX, чтобы передать все свои магазины своему приложению
  2. Затем я получаю нужный магазин в своем компоненте с помощью @inject.
  3. Я использую его как реквизит, используя _8 _... Но это не работает. Я полагаюсь на этот учебник для структуры: https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

Возможно, между маем 2017 года и сегодня было обновление, которое меняет ситуацию ... В мае 2017 года оно работало хорошо. Я думаю, что это фиктивная ошибка, но я не могу найти, какая ...


person John    schedule 14.08.2017    source источник
comment
Вы пробовали удалить @inject(['ChatStore']) @observer @autobind из своего UserStore класса?   -  person Tholle    schedule 14.08.2017
comment
Джон, вы нашли решение своей проблемы? У меня точно такая же проблема, но в моем магазине нет автопривязки и наблюдателя, поэтому я не уверен, что делать.   -  person Алик Нематов    schedule 22.12.2018
comment
На самом деле, в моем случае я забыл создать экземпляр своего магазина, прежде чем передать его с помощью Provider. На случай, если кто-то другой совершит ту же глупую ошибку   -  person Алик Нематов    schedule 22.12.2018


Ответы (2)


Все выглядит хорошо, кроме декораторов в вашем UserStore классе: @inject(['ChatStore']) @observer @autobind. @inject(['ChatStore']) @observer используется в компонентах React, @autobind может работать по назначению.

Он должен работать, если вы удалите их.

person Tholle    schedule 14.08.2017

возможно стоит использовать @action от mobx

person Павел Слипчук    schedule 09.03.2019