Mobx 商店未注入答案

【问题标题】：Mobx store not injectedMobx 商店未注入
【发布时间】：2017-05-26 08:51:21
【问题描述】：

我尝试做那个商店对象 UserStore.js

import { observable, action } from 'mobx';

class UserStore {

    constructor() {
        const me = observable({
            me: null,
            auth: action.bound(function(me) {
                this.me = me;
            })
        })
    }
}

export default UserStore;

在这之后，我会这样做

App.js

   const App = inject('routing','UserStore')(observer(class App extends Component {
    constructor(props, context) {
        super(props, context);
        this.handleFiles = this.handleFiles.bind(this);
        this.prepareTable = this.prepareTable.bind(this);
        this.state = {excel: null};
    }

    render() {
        const {location, push, goBack} = this.props.routing;
        const {userStore} = this.props.userStore;

在 index.js 中我会这样做

    const stores = {
    // Key can be whatever you want
    routing: routingStore,
    UserStores
};

const history = syncHistoryWithStore(browserHistory, routingStore);

ReactDOM.render(
    <Provider {...stores}>
        <Router history={history}>
            <Entry/>
        </Router>
    </Provider>,
    document.getElementById('root')
);

让我们尝试打开 localhost:3000 并查看此错误

错误：MobX 观察者：存储 'UserStore' 不可用！确保它是由某个 Provider 提供的

更新：我正在使用 create-react-app 创建一个项目，但我不能在代码中使用 @（@injector 的示例）

【问题讨论】：

你写的是UserStores而不是UserStore。还尝试导出 UserStore 的实例，而不是类本身：export default new UserStore();

标签： javascript reactjs mobx mobx-react

【解决方案1】：

我认为您应该返回商店的一个实例。为了更有条理，我有一个像“storeInitializer.ts”这样的文件（在这里使用打字稿）：

import YourStoreName from '../yourStoreFolder/yourStore';

export default function initializeStores() {
    return {
        yourStoreName: new YourStoreName(),
    }
}

然后我有另一个文件，例如“storeIdentifier.ts”：

export default class Stores {
    static YourStoreName: string = 'yourStoreName';
}

在应用程序文件中，我执行以下操作：

import React from 'react';
import { inject, observer } from 'mobx-react';
import Stores from './storeIdentifier';

const App = inject(Stores.YourStoreName)(observer(props: any) => {
    //code here
});

export default App;

或者如果您使用的是类组件方法...

import React from 'react';
import { inject, observer } from 'mobx-react';

@inject(Stores.YourStoreName)
@observable
class App extends Component {
    //code here
}

export default App;

【讨论】：