MobX 状态树中带有 'flow' 的生成器语法

Question

我在 MobX 状态树存储中有三个操作：第一个从 API 获取数据，第二个使用 API 中的数据发送一个 POST 请求数据库，第三个获取响应并将其保存到商店。

商店仅由称为列表的这些数据结构的映射组成：

export const ListStore = types
  .model('ListStore', {
    lists: types.map(List),
  })

发送 GET 和 POST 请求的前两个操作工作正常：

 .actions((self) => ({
    fetchTitles: flow(function* fetchTitles(params: Params) {
      const env = getStoreEnv(self);
      const { clients } = env;
      const browseParams: BrowseParams = {
        category: 'movies',
        imdb_score_min: params.filter.imdbFilterScore,
      };
      let browseResult;
      try {
        browseResult = yield clients.browseClient.fetch(browseParams);
      } catch (error) {
        console.error('Failed to fetch titles', error);
      }
      return browseResult.data.results.map((title) => title.uuid);
    }),
  }))
  .actions((self) => ({
    postList: flow(function* postList(params: Params) {
      const env = getStoreEnv(self);
      const { clients } = env;
      const titles = yield self.fetchTitles(params);
      return clients.listClient.create({
        name: params.name,
        titles,
        invites: params.invites,
        filter: params.filter,
      });
    }),
  }))

但是到了第三个动作，实际上是将List保存到ListStore中，就没有这样的运气了。我尝试了很多变体，但只有 none 个变体有效。老实说，我不太熟悉生成器语法，我什至尝试过在没有生成器的情况下这样做。在这里你可以看到我的尝试：

createList: flow(function* createList(params: Params) {
  const env = getStoreEnv(self);
  const list = yield self.postList(params);
  console.log('list in createList', list.data);
  return self.lists.put(List.create({ ...list.data }, env));
  // return self.lists.set(list.id, list.data);
}),
createList: flow(function* createList(params: Params) {
  const list = yield self.postList(params);
  console.log('list in createList', list.data);
  yield self.lists.set(list.id, list.data);
}),
createList(params: Params) {
  return self.postList(params).then((list) => {
    console.log('list in createList', list.data);
    self.lists.set(list.id, list.data);
  });
},
createList: flow(function* createList(params: Params) {
  yield self.postList(params).then((list) => {
    console.log('list in createList', list.data);
    return self.lists.set(list.id, list.data);
  });
}),

我试过 .set() 和 .put()，但没有用。我也尝试过使用 yield 和 return...似乎没有任何效果。 console.log('list in createList', list.data); 中记录的数据看起来正确且与模型匹配（如果不匹配，我不会收到这样的错误提示吗？）。没有错误记录到控制台，它只是默默地失败了。

如能指出错误并指出应该如何写，将不胜感激。谢谢！

Answer 1

事实证明问题不在于语法：正如您在 MST 维护者的第一条评论中看到的那样，第二个版本是正确的。

问题在于模型（此处未显示）的创建方式。

MobX 状态树中带有 'flow' 的生成器语法

Generator syntax with 'flow' in MobX State Tree

javascript

generator

ecmascript-6

mobx

mobx-state-tree