在 MobX 中如何从 Store 中引用一个 observable

Question

我只想将 StoreA 的一个可观察对象传递给 StoreB，而不传递完整的 StoreA。

这是一个示例，我在 TodoStore 的构造函数中从 UserStore 传递了 user observable，但显然当我更改 observable 时它不会更新。

所以问题是如何在不通过 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"));

在这里您可以查看完整代码： https://codesandbox.io/s/mobx-test-zubi-pf1qn

非常感谢！

Answer 1

很好的决定，来自mobx docs

的推荐

Answer 2

如果参考What does MobX react to?

您将了解到 mobx 跟踪 属性访问 而不是值。所以你可以传入一个 specific observable，但它不能是原始值。

使 UserStore.user 成为一个对象，然后您将能够按照您想要的方式跟踪它的属性 (UserStore.user.name) 等

Answer 3

我发现到目前为止最简单的方法是这样的：

export class TodoStore {

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

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

  // ...

}

// ...

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

// ...

在 MobX 中如何从 Store 中引用一个 observable

In MobX how to reference an observable from StoreB that is in StoreA

observable

typescript

reactjs

mobx