react js react-router-dom 商店不通过提供者答案

【问题标题】：react js react-router-dom stores not pass by providersreact js react-router-dom 商店不通过提供者
【发布时间】：2018-03-08 09:09:54
【问题描述】：

我正在将 react js 与 mobx 一起使用，我正在尝试在提供程序中传递商店并使用它，但似乎它不是由提供程序传递的，我无权访问它。此外，当我尝试注入 UserStore 时，Web 应用程序失败并抛出 UserStore 不可用的错误

    import { Switch, Route} from 'react-router-dom';
import React, {Component} from 'react';
import {Router} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import {Provider} from 'mobx-react'
import { TodoStore,UserStore, ModalsStore} from '../stores'
import App from './App';
import {Login} from '../screens'

const stores = { UserStore}

const browserHistory = createBrowserHistory();





export default class Root extends Component {
    render() {
        return (

            <Provider stores={stores}>
            <Router history={browserHistory}>
                <Switch>
                    <Route exact path='/login' component={Login}/>            
                    <Route  component={App}/>            
                </Switch>
            </Router>
            </Provider>
        )
    }
}

我的 App 组件的一部分

    @observer
export default class App extends Component {
    constructor(props){
        super(props);
        console.log('appProps',props)
    }
    render() {
            ........... 
     }

用户存储

   import {observable,action} from 'mobx'

class UserStore {
    @observable token = false
    @observable first_name = '';
    @observable last_name = '' 



    @action setUser(data) {
        this.token = data.token;
        this.first_name = data.first_name;
        this.last_name = data.last_name;
    }

    @action updateUser(data) {
        this.first_name = data.first_name;
        this.last_name = data.last_name;
    }

    @action setToken(token){
        this.token = token;
    }

}

const singelton = new UserStore()

export default singelton

我正在尝试使用 userStore 并获得访问权限，但在控制台中我得到了

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

您必须在 App 类中使用 @inject('stores')。
像这样：

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

@inject('stores') 
@observer
export default class App extends Component {
  render() {
    console.log(this.props.stores);
    
    return (
      <div>{ /* your components */}</div>
    );
  }
}

基本上每个班级，如果你想要道具中的商店，你必须使用inject。

就个人而言，我更喜欢 import stores from './UserStore' 没有 Provider 和 inject。
这样就可以直接访问store，并且可以像setState一样设置任意一个store里面的observable。

下面的代码是 MobX 使用 singleton store 与observer 和observable 而不使用setState() 的方式：

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import stores from './userStore';

@observer
export default class App extends Component {
  render() {
    return (
      <div>
        <input value={stores.first_name} onChange={this.onChangeHandler}/>
      </div>
    );
  }

  onChangeHandler = e => {
    // MobX will setState and trigger the React re-render for you
    stores.first_name  = e.target.value; 
  }
}

【讨论】：