Búsqueda de sitios web

reactjs - En MobX, cómo referenciar un observable de StoreB que está en StoreA


Me gustaría pasar solo un observable de StoreA a StoreB sin pasar todo el StoreA.

Aquí hay un ejemplo, donde paso el observable user en el constructor de TodoStore desde el UserStore, pero obviamente no se actualiza cuando cambio el observable.

Entonces, la pregunta es cómo hacerlo de la manera más limpia y corta, sin pasar la referencia completa del UserStore?

import * as React from "react";
import { render } from "react-dom";
import { observer } from "mobx-react";
import { observable, computed, action } from "mobx";

export class TodoStore {
  @observable public todos: string[] = [ "default" ];
  private user:string;

  constructor(user:string) {
    this.user = user;
  }

  @action.bound
  public addTodo = (todo: string) => {
    this.todos.push(this.user + ": " + todo);
  };
}

export class UserStore {
  @observable public user: string = "zubi";

  @action.bound
  public change = (name: string) => {
    this.user = name;
  };
}

var userStore = new UserStore();
var todoStore = new TodoStore(userStore.user);

@observer
class App extends React.PureComponent {
  public render() {
    return (
      <div>
        <button onClick={e => {todoStore.addTodo("hello" + Math.floor(Math.random() * 1000));}}>
          add message
        </button>
        <button onClick={e => { userStore.change("Eve" + Math.floor(Math.random() * 100),);}}>
          change name
        </button>
        <div>
          {todoStore.todos.map(todo => { return <div key={todo}>{todo}</div>;})}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Aquí puedes consultar el código completo: https://codesandbox.io/s/mobx-test-zubi-pf1qn

¡Muchas gracias!

Respuesta #1

He encontrado que la forma más simple hasta ahora es algo así:

export class TodoStore {

  @computed get user(): string {return this._user()};

  constructor(private _user: () => string) { }

  // ...

}

// ...

var todoStore = new TodoStore( () => userStore.user );

// ...

Respuesta #2

Es una buena decisión, recomendación de la documentación de mobx