Как разделить результаты запроса на одной странице

Question

У меня есть страница, которая состоит из двух разделов: 1) Список вопросов;2) Список вопросов с самым высоким рейтингом

В этих двух запросах используется один и тот же вызов внутреннего API, единственное отличие состоит в том, что я передаю дополнительный параметр, например, showPopular = true в последнем случае.

Когда я пытаюсь отобразить данные, любое действие, которое извлекается последним, перезаписывает данные в обоих разделах. Как я могу различить такие данные?

Я использую ReactJS, Redux. Это для извлечения данных:

query={showPopular:true}
this.props.actions.loadQuestions(accountId, query);

У меня есть

const mapStateToProps = (state) => {
    return {
        error: state.questions.error,
        questions: state.questions.questions|| [],
        isLoading: state.questions.isLoading
    };
}

Answer 1

Вы должны как минимум разделить состояние / проп / редуктор, потому что эти два списка совершенно разные, и они, очевидно, будут отображать разные DOM.

У mapState должно быть различное отображение реквизитов:

const mapStateToProps = (state) => {
    return {
        error: state.questions.error,
        questions: state.questions.questions|| [],
        topQuestions: state.questions.topQuestions,
        isLoading: state.questions.isLoading
    };
}

Вы не опубликовали редуктор, но он также должен разделить два действия или использовать условие для обновления другого состояния:

export default (state = initialState, action) => {
  switch (action.type) {
    case LOAD_QUESTION:
      if(action.query.showPopular){
        return state.set('topQuestions', action.data);
      }else{
        return state.set('questions', action.data);
      }

    default:
      return state;
  }
};