Как подключить состояние к реквизитам с помощью mobx.js @observer при использовании класса ES6?

Ответ 1

Во-первых, вот пример простого приложения, выполняющего маршрутизацию с использованием MobX, React и response-router: https://github.com/contacts-mvc/mobx-react-typescript

В общем, лично мне нравится явно передавать все соответствующие магазины в качестве явных подписок к моим компонентам. Но вы также можете использовать пакет, например Ryan, чтобы ваши магазины передавались вашим компонентам с использованием механизма контекста React, аналогичного Redux-соединению (см. это приложение для примера).

Как только у вас есть ваш магазин в вашем компоненте, проанализируйте параметры маршрутизации в ComponentWillMount и соответствующим образом обновите свои магазины.

Это должно быть в основном все:) Но дайте мне знать, если я позволю чему-нибудь без ответа.

Ответ 2

Неделю назад мы начали новый проект с реагировать и mobx, и я столкнулся с той же проблемой, что и ваш. Оглянувшись, я нашел, что лучший способ - использовать контекст. Вот как:

Магазин: stores/Auth.js

import { get, post } from 'axios';
import { observable, computed } from 'mobx';
import jwt from 'jsonwebtoken';
import singleton from 'singleton';

import Storage from '../services/Storage';

class Auth extends singleton {
  @observable user = null;
  @computed get isLoggedIn() {
    return !!this.user;
  }

  constructor() {
    super();

    const token = Storage.get('token');

    if (token) {
      this.user = jwt.verify(token, JWT_SECRET);
    }
  }

  login(username, password) {
    return post('/api/auth/login', {
      username, password
    })
    .then((res) => {
      this.user = res.data.user;
      Storage.set('token', res.data.token);
      return res;
    });
  }

  logout() {
    Storage.remove('token');
    return get('/api/auth/logout');
  }
}

export default Auth.get();

Примечание: мы используем singleton, чтобы убедиться, что это только один экземпляр, потому что хранилище можно использовать вне реагирующих компонентов, например. routes.js

Маршруты: routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './App';
import Login from './Login/Login';
import Admin from './Admin/Admin';
import Dashboard from './Admin/views/Dashboard';
import Auth from './stores/Auth'; // note: we can use the same store here..

function authRequired(nextState, replace) {
  if (!Auth.isLoggedIn) {
    replace('/login');
  }
}

export default (
  <Route name="root" path="/" component={App}>
    <Route name="login" path="login" component={Login} />
    <Route name="admin" path="admin" onEnter={authRequired} component={Admin}>
      <IndexRoute name="dashboard" component={Dashboard} />
    </Route>
  </Route>
);

Основной компонент: App.js

// App.js
import React, { Component } from 'react';
import Auth from './stores/Auth';

export default class App extends Component {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  };

  static childContextTypes = {
    store: React.PropTypes.object
  };

  getChildContext() {
    /**
     * Register stores to be passed down to components
     */
    return {
      store: {
        auth: Auth
      }
    };
  }

  componentWillMount() {
    if (!Auth.isLoggedIn) {
      this.context.router.push('/login');
    }
  }

  render() {
    return this.props.children;
  }
}

И наконец, компонент, использующий хранилище: Login.js

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

@observer
export default class Login extends Component {

  static contextTypes = {
    router: React.PropTypes.object.isRequired,
    store: React.PropTypes.object.isRequired
  };

  onSubmit(e) {
    const { auth } = this.context.store; // this is our 'Auth' store, same observable instance used by the `routes.js`

    auth.login(this.refs.username.value, this.refs.password.value)
      .then(() => {
        if (auth.isLoggedIn) this.context.router.push('/admin');
      })
      .catch((err) => {
        console.log(err);
      });

    e.preventDefault();
  }

  render() {
    return (
      <div className="login__form">
        <h2>Login</h2>
        <form onSubmit={this.onSubmit.bind(this)}>
          <input type="text" ref="username" name="username" placeholder="Username" />
          <input type="password" ref="password" name="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
      </div>
    );
  }
}

Вы можете объявлять новые магазины и добавлять их в getChildContext из App.js, и всякий раз, когда вам нужно определенное хранилище, просто объявляйте зависимость store в компоненте contextTypes и получите его от this.context.

Я заметил, что это не требование пропускать наблюдаемый как prop, просто имея декоратор @observer и используя любое наблюдаемое значение в вашем компоненте, mobx и mobx-react делают свою магию.

Кстати, редукс <Provider store={myStore}><App /></Provider> делает то же, что объясняется в App.js. https://egghead.io/lessons/javascript-redux-passing-the-store-down-implicitly-via-context

Ссылка:

• http://mobxjs.github.io/mobx/refguide/observer-component.html
• https://facebook.github.io/react/docs/context.html

Ответ 3

mobx-react предлагает (экспериментальный - на момент написания) Provider (компонент) и inject (более высокий порядок компонент) для передачи свойств иерархии компонентов ниже.

Сверху вы можете использовать компонент Provider для передачи всей релевантной информации. Под капотом используется контекст React.

import { Provider } from 'mobx-react';
...
import oneStore from './stores/oneStore';
import anotherStore from './stores/anotherStore';

const stores = { oneStore, anotherStore };

ReactDOM.render(
  <Provider { ...stores }>
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="/" component={SomeComponent} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);

В SomeComponent вы можете получить переданные свойства с помощью inject HOC:

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

const SomeComponent = inject('oneStore', 'anotherStore')(observer(({ oneStore, anotherStore }) => {
  return <div>{oneStore.someProp}{anotherStore.someOtherProp}</div>;
}))

export default SomeComponent;

[Отказ от ответственности: я написал об этом в MobX React: Упрощенное управление государством в действии, и вы можете увидеть минимальное приложение шаблона, которое использует API SoundCloud.]

Ответ 4

Взгляните на react-tunnel. Он дает вам компонент Provider и декоратор inject (работает как connect в redux).