未注入 Mobx 存储

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

我认为您应该 return 商店的一个实例。为了更有条理，我有一个像 "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;

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

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

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

export default App;

未注入 Mobx 存储

Mobx store not injected

javascript

reactjs

mobx

mobx-react