React js React-router-dom не проходит мимо провайдеров

Я использую react js с mobx, и я пытаюсь передавать магазины в провайдеры и использовать их, но, похоже, они не проходят мимо провайдеров, и у меня нет к ним доступа. кроме того, когда я пытаюсь внедрить UserStore, веб-приложение завершается сбоем и выдает ошибку, что 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>
        )
    }
}

часть моего компонента приложения

    @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
person Manspof    schedule 08.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны @inject('stores') в своем App классе.
Вот так:

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.
Таким образом, вы можете получить доступ к хранилищу напрямую и установить любое наблюдаемое внутри хранилища так же, как setState.

Приведенный ниже код представляет собой 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; 
  }
}

person FisNaN    schedule 09.03.2018