MobX - Update multiple store array items at once? - mobx

Question

I have 4 stores for a stack overflow example:
SearchQuestionsStore
RecentQuestionsStore
UserQuestionsStore
CurrentQuestionStore
Each of the first 3 stores have an #observable questionsList = [];
A question may be accessed from any of those 3 stores, when the questionsList is populated with questions. An #observable currentQuestion holds the current selected question in the CurrentQuestionStore
If a user upvotes the currentQuestion, we simply increment the current question's count using CurrentQuestionStore.currentQuestion.upvotes++, but this does not reflect the latest upvote count in the other 3 stores.
The issue is that the question may or may not exist in any of the other 3 stores questionlists, so I was wondering what would be the best way to approach this using MobX? So we can update the latest count for this questionId = 1 across all stores if they exist. The same situation occurs when changing the title, answers count, or any other attribute on the currentQuestion
What's the best way to reflect the changes of any attribute change across the stores at once?

Answer 1

With MobX, you should never have two copies of the same thing. The same question object should be referenced from all stores. To achieve this, it will depend on how your code is setup to load and store the questions.
One way I suggest doing this is to have an AllQuestionsStore that contains all questions in a map:
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);
}
}
Then you whenever you create or load a question, you should add it to this store. For example, when you load user questions from the server:
function loadedUserQuestions(userQuestions) {
const questions = userQuestions.map(AllQuestionsStore.addQuestion, AllQuestionsStore);
UserQuestionsStore.questionsList = questions;
}
And if you want to set the current question:
CurrentQuestionStore.currentQuestion = AllQuestionsStore.addQuestion(question);
Now it's guaranteed that a question has only one instance, so if you update it, other stores will never be out of date.