React Redirect на другой маршрут из действия redux

Я использую Redux для управления состоянием и саги в качестве промежуточного программного обеспечения. Приложение работает нормально. У меня есть компонент с несколькими полями поиска. Ниже представлена ​​упрощенная версия формы:

 <div>
    <form onSubmit = {this.handleSubmit} noValidate>
      <div>
        <div >
          <label> ORIGIN City </label>
          <br/>

          <select name = "originCity" onChange = {this.handleChangeEvent}>
            {this.props.airportData.map(airport => (
              <option key = {airport.key} value = {airport.key}> {airport.name}</option>
            ))}
          </select>
        </div>

        <div c>
          <label> DESTINATION City </label>
          <br/>
          <select name = "destinationCity" 
                  onChange = {this.handleChangeEvent}>
            {this.props.airportData.map(airport => (
              <option key = {airport.key} value = {airport.key}> {airport.name}</option>
            ))}
          </select>

При отправке я вызываю действие (которое, в свою очередь, вызывает api), которое будет искать рейсы между пунктом отправления и пунктом назначения. Требование состоит в том, что если api не возвращает данных, мне нужно оставаться на том же компоненте и отображать сообщение об ошибке, но если api возвращает результат, мне нужно перейти на другой маршрут. Я знаю, что могу перейти к другому маршруту из действия, но как мне отобразить данные, возвращенные из api, без двойного вызова api?

Любая помощь по этому поводу будет высоко оценена?

Добро пожаловать в Stackowerflow! Возвращенные данные должны быть в вашем магазине, чтобы вы могли получить к ним доступ после навигации с помощью селектора.

gazdagergo 23.08.2018 04:54

Спасибо за ваш ответ. Мне также нужно, чтобы эта работа работала, если пользователь просто вводит URL-адрес (маршрут) в браузере с параметрами запроса. Например someurl / searchResults? originCity = xyz и destinationCity = abc. Я бы не знал, переходит ли пользователь на этот URL-адрес, потому что кто-то отправляет ему URL-адрес в электронном письме, или они перенаправляются на этот компонент из компонента поиска.

Vin 23.08.2018 05:01

Для параметров запроса изучите использование ownParams и то, как response-router позволяет вам определять маршруты, такие как «/ searchResults /: originCity /: destinationCity».

Chris Cousins 23.08.2018 05:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
90
0

Другие вопросы по теме