mobx装饰器不适用于Typescript

Question

我刚刚开始开发一个新项目，我使用mobx作为反应Web应用程序和react-native移动应用程序之间的共享状态管理核心模块。

核心模块使用typescript，它由两个应用程序项目编译和使用。

我的问题是，当商店中的@observable属性（来自核心模块）发生变化时，两个项目中的组件都不会重新呈现。

当我在每个项目中创建具有相同定义和逻辑的商店时，组件将按预期重新呈现。我还将部分核心模块转换为用babel-cli编译的javascript ES6，它也按预期工作。

我相信这个问题与将Typescript编译的商店导入非打字稿项目有关，但我无法克服它！

附加信息：

.ts商店文件：

import { observable, action } from 'mobx'

export class UserStore {
    @observable loading = false;

    @action login() {
        this.loading = true;
        setTimeout(() => {this.loading = false},1000)
    }
}
export const userStore = new UserStore();

.tsconfig文件：

{"compilerOptions": {
    "lib": ["es6", "dom", "es2015"],
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "declaration": false,
    "outDir": "lib",
    "experimentalDecorators": true
  },
  "include": ["index.ts", "src" ]}

打字稿版本：2.4.1

所有项目都使用最新的mobx和mobx-react版本。

反应和反应原生项目都使用普通的babel。

消耗商店的组件（我已经配置了Provider ..）：

@inject('userStore')
@observer
class Loading extends Component {

  componentWillMount() {
    this.props.userStore.login();
  }

  render() {
    return (
        this.props.userStore.loading ? <div>loading...</div> : <div>loaded...</div>
) }}

Answer 1

而不是@inject('userStore')只需使用import {userStore} from "./foo/userStore"。

简而言之：

@observer
class Loading extends Component {

  componentWillMount() {
    userStore.login();
  }

  render() {
    return (
        userStore.loading ? <div>loading...</div> : <div>loaded...</div>
) }}