0

スタック オーバーフローの例として 4 つのストアがあります。

SearchQuestionsStore
RecentQuestionsStore
UserQuestionsStore
CurrentQuestionStore

最初の 3 店舗にはそれぞれ@observable questionsList = [];

に質問が入力されると、これら 3 つのストアのいずれからでも質問にアクセスできますquestionsList。現在選択されている@observable currentQuestion質問は、CurrentQuestionStore

ユーザーが に賛成票を投じた場合、currentQuestionを使用して現在の質問のカウントを増やすだけですCurrentQuestionStore.currentQuestion.upvotes++が、これは他の 3 つのストアの最新の賛成票カウントを反映していません。

問題は、質問が他の 3 つのストアのいずれにも存在しない可能性があることです。そのquestionlistsため、MobX を使用してこれにアプローチする最善の方法は何でしょうか? questionId = 1したがって、存在する場合は、すべての店舗でこれの最新のカウントを更新できます。タイトル、回答数、またはその他の属性を変更すると、同じ状況が発生します。currentQuestion

ストア全体で属性の変更を一度に反映する最善の方法は何ですか?

4

1 に答える 1

2

MobX では、同じものを 2 つ持つべきではありません。すべてのストアから同じ質問オブジェクトを参照する必要があります。これを達成するには、質問をロードして保存するためにコードがどのように設定されているかによって異なります。

私がこれを行うことをお勧めする 1 つの方法は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);

質問のインスタンスが 1 つだけであることが保証されるようになったため、質問を更新しても、他のストアが古くなることはありません。

于 2016-11-28T06:53:24.050 に答える