MobX - 在另一个商店中访问时，使用 fromPromise 在商店构造函数中 promise 的可观察值保持为空？

Question

所以我有 2 个商店，一个 AuthorStore :

class AuthorStore {
  constructor() {
      // has author.name and is always present in storage
      AsyncStorage.getItem('author').then(action((data) => {
        this.author = JSON.parse(data);
      }));
  }

  @observable author = null;
}

和一个 BookStore :

import AuthorStore from 'authorStore';
class BookStore {
  @observable book = {
    authorName: AuthorStore.author.name,
    bookTitle: null
  }
}

我在 BookStore 中不断收到错误消息它无法获得 null 的属性，好像 AuthorStore.author.name一片空白。所以它正在读取默认值 author来自 AuthorStore 的值没有首先运行构造函数来为其分配值。

我遇到了新的 mobx-utils fromPromise我认为会得到 author值如果存在于本地存储中，并等待 AsyncStorage将其分配给 author可观察的，所以它可以从另一个商店调用而无需 null .

我尝试使用 fromPromise首在 AuthorStore登录 author值，但显示为 Got undefined在控制台中，以及通常的 null BookStore 中的错误说到 AuthorStore.author部分。

更新:

class AuthorStore {
  @observable author = null;

  @computed get theAuthor() {
    authorPromise = fromPromise(AsyncStorage.getItem('author').then(data => JSON.parse(data)));

    // combine with when..
    when(
      () => authorPromise.state !== "pending",
      () => {
        console.log("Got Author", authorPromise.reason || authorPromise.value) // This runs, and returns author
        console.log("Got Name", authorPromise.reason || authorPromise.value.name) // This runs, and returns name
        return authorPromise.value; // This doesn't get returned in BookStore when calling this computed
      }
    );
  }
}

class BookStore {
  @observable book = {
    authorName: AuthorStore.theAuthor.name, // doesn't get computed returned value from promise
    bookTitle: null
  }
}

我如何获得 fromPromise由 AuthorStore 分配的值计算函数 theAuthor返还 promise authorPromise值(value)成 BookStore下 authorName ?

Answer 1

FromPromise 创建一个新对象包装原始 promise 。所以你的 authorFromStorage在您的示例中只是一个正常的 promise ，没有 state属性(property)。因此，您应该将代码更改为:
authorPromise = fromPromise(AsyncStorage.getItem('author').then(data => JSON.parse(data)))
然后when(() => authorPromise.state !== "pending")等等..

** 更新 **

class AuthorStore {
  @observable author = null;

  constructor() {
    AsyncStorage.getItem('author').then(data => { this.author = JSON.parse(data) });
  }
}

class BookStore {
  @observable book = {
    authorName: function() {  // a function in an observable creates a computed prop
      return AuthorStore.author && AuthorStore.author.name
    },
    bookTitle: null
  }
}