一次只有一个 MobX-State-Tree 流处于活动状态

如何解决一次只有一个 MobX-State-Tree 流处于活动状态

我有一个 MobX-State-Tree (MST) 存储，其中的操作是一个 flow 异步获取一些项目。可以从应用中的多个位置调用此操作，有时甚至同时调用，但我希望一次只激活一个 flow。

MST 中是否有任何方法可以返回当前活动的 flow（如果有），或者如果没有则创建一个新的？

示例

const Thing = types.model({
  id: types.identifier,name: types.string,});

const ThingStore = types
  .model({
    things: types.array(Thing),})
  .actions((self) => ({
    // This action will create a new flow every time it is called.
    fetchThings: flow(function* () {
      const things = yield fetchThings();

      self.things = things;
    }),}));

解决方法

您可以创建一段 volatile state 来保存对调用 flow 时返回的承诺的引用。如果 flow 已经处于活动状态，我们将返回此承诺。如果没有，我们创建一个新的 flow 并返回它。

示例

const Thing = types.model({
  id: types.identifier,name: types.string,});

const ThingStore = types
  .model({
    things: types.array(Thing),})
  .actions((self) => {
    let fetchThingsPromise = null;
    const fetchThings = flow(function* () {
      try {
        const things = yield fetchThings();

        self.things = things;
      } finally {
        fetchThingsPromise = null;
      }
    });

    return {
      fetchThings: function () {
        if (fetchThingsPromise) return fetchThingsPromise;

        fetchThingsPromise = fetchThings.apply(null,arguments);
        return fetchThingsPromise;
      },};
  });