MobX + React Native:注入商店的方式
MobX + React Native : way to inject stores
我正在尝试使用 MobX 进行一个新项目。
我于 2017 年 5 月启动,一切正常。我不得不停下来,现在我继续发展它。我不得不制作一个 npm install
来让它工作,但现在,我在商店方面遇到了一些问题......
我依靠这个 tutorial 的结构:https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
这是我的结构 :
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);
}
...
现在,对于组件部分:
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
在我的组件中获得我想要的 Store
- 我将它用作 道具,使用
this.props.UserStore
...
但它不起作用。我依赖本教程的结构:https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
也许从 2017 年 5 月到今天有更新,这让事情变得不同了......它在 2017 年 5 月运行良好。
我认为这是一个伪错误,但我找不到哪个...
除了 UserStore
class: @inject(['ChatStore']) @observer @autobind
上的装饰器外,一切看起来都不错。 @inject(['ChatStore']) @observer
用于 React 组件,@autobind
可能仍会按预期工作。
如果你删除它们应该可以工作。
也许值得使用 mobx 的@action
我正在尝试使用 MobX 进行一个新项目。
我于 2017 年 5 月启动,一切正常。我不得不停下来,现在我继续发展它。我不得不制作一个 npm install
来让它工作,但现在,我在商店方面遇到了一些问题......
我依靠这个 tutorial 的结构:https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
这是我的结构 :
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);
}
...
现在,对于组件部分:
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 在我的组件中获得我想要的 Store
- 我将它用作 道具,使用
this.props.UserStore
... 但它不起作用。我依赖本教程的结构:https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
也许从 2017 年 5 月到今天有更新,这让事情变得不同了......它在 2017 年 5 月运行良好。 我认为这是一个伪错误,但我找不到哪个...
除了 UserStore
class: @inject(['ChatStore']) @observer @autobind
上的装饰器外,一切看起来都不错。 @inject(['ChatStore']) @observer
用于 React 组件,@autobind
可能仍会按预期工作。
如果你删除它们应该可以工作。
也许值得使用 mobx 的@action