javascript - Mobx 存储未注入(inject)

Question

我尝试做那个存储对象 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 并看到此错误

Error: MobX observer: Store 'UserStore' is not available! Make sure it is provided by some Provider

更新: 我正在使用 create-react-app 创建一个项目，但我无法在代码中使用 @(@injector 的示例)

Answer 1

我认为你应该返回商店的一个实例。 为了更有条理，我有一个像“storeInitializer.ts”这样的文件(在这里使用 typescript ):

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;