MobX

Question

我有 4 个存储用于堆栈溢出示例：

SearchQuestionsStore
RecentQuestionsStore
UserQuestionsStore
CurrentQuestionStore

前 3 家商店各有一个 @observable questionsList = [];

当 questionsList 中填满问题时，可以从这 3 个商店中的任何一个访问问题。 @observable currentQuestion 在 CurrentQuestionStore

中保存当前选定的问题

如果用户对 currentQuestion 点赞，我们只需使用 CurrentQuestionStore.currentQuestion.upvotes++ 增加当前问题的计数，但这并不反映其他 3 家商店的最新点赞计数。

问题是其他 3 家商店中可能存在也可能不存在该问题 questionlists，所以我想知道使用 MobX 解决此问题的最佳方法是什么？因此，我们可以更新所有商店中此 questionId = 1 的最新计数（如果存在）。更改 currentQuestion

上的标题、答案计数或任何其他属性时，也会出现同样的情况

一次性反映商店中任何属性变化的最佳方式是什么？

Answer 1

使用 MobX，你永远不应该拥有同一事物的两个副本。应从所有商店引用相同的问题对象。要实现这一点，将取决于您的代码如何设置以加载和存储问题。

我建议这样做的一种方法是 AllQuestionsStore 在地图中包含所有问题：

class AllQuestionsStore {
  @observable questionsMap = asMap({});

  @action addQuestion(question) {
    const map = this.questionsMap;
    if (map.has(question.id)) {
      extendObservable(map.get(question.id), question);
    } else {
      map.set(question.id, question);
    }
    return map.get(question.id);
  }
}

然后你无论何时创建或加载问题，你都应该将它添加到这个商店。例如，当您从服务器加载用户问题时：

function loadedUserQuestions(userQuestions) {
  const questions = userQuestions.map(AllQuestionsStore.addQuestion, AllQuestionsStore);
  UserQuestionsStore.questionsList = questions;
}

而如果你想设置当前问题：

CurrentQuestionStore.currentQuestion = AllQuestionsStore.addQuestion(question);

现在保证一个问题只有一个实例，所以如果你更新它，其他商店永远不会过时。

MobX - 一次更新多个存储数组项？

MobX - Update multiple store array items at once?