React / Redux - Не диспетчерское действие - PullRequest
Новая
       19

React / Redux - Не диспетчерское действие

0 голосов
/ 25 апреля 2018

Я новичок в реакции редукса. Я пытаюсь создать простое приложение для ресторана с API Foursquare. У меня есть два действия, которые делают вызовы API для 1-го. ищите ресторан и 2-й, чтобы получить подробности, подобные этой.

Action.js 

export const fetchVenueDetail = venueId => dispatch => {
  console.log("dispatching");
  dispatch({ type: FETCH_VENUE_REQUESTED });
  fetch(
    `https://api.foursquare.com/v2/venues/${venueId}? 
     client_id=${api_id}&client_secret=${api_key}&v=20180422`
  )
    .then(res => res.json())
    .then(data => dispatch({ type: FETCH_VENUE, payload: 
     data.response.venue }))
    .catch(err => console.log(err));
};

Вот мой компонент 

class VenueDetail extends Component {
  componentDidMount() {
    this.props.fetchVenueDetail(this.props.match.params.id);
  }
  render() {
    console.log(this.props);
    const { venue, isLoading } = this.props;
    console.log("This text", venue);
    return (
      <React.Fragment>
        <Header type="venueDetail" venueDetail={venue} />
        <main className="main-content">
          <section className="venue">
            { !isLoading ? <ImageList venueDetail={venue} /> : <Loader /> }
          </section>
          <div className="sidebar-wrapper">
            <Sidebar type="tips" venueDetail={venue} />
          </div>
        </main>
      </React.Fragment>
    )
  }
};

const mapStateToProps = state => ({
  venue: state.venueReducer.venue,
  isLoading: state.venueReducer.isLoading
})

export default connect(mapStateToProps, {fetchVenueDetail})(VenueDetail);

После тестирования я понял, что это не отправка действия, поэтому я получаю пустой ответ.

Вот код рабочей песочницы. Если кто-то захочет проверить - https://codesandbox.io/s/7m4153p1jq

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Реальная проблема в том, что вы получаете ошибку до того, как ваш запрос запускается в Sidebar компоненте. В вашем venue объекте нет свойства groups, пока ваш запрос не будет выполнен.

Если вы добавите такую ​​проверку в "tips" случае, она должна работать хорошо: 

const itemTips = venueTips.tips.groups ? venueTips.tips.groups[0].items : [];

Вы можете добавить groups к вашему редуктору и проверить свойство length или выбрать другой способ, например, обернуть все компоненты, включая компонент Sidebar, и отобразить Loader вместо них. Примерно так:

VenueDetail.js 

{
    (!isLoading && venue.id) ?
        <React.Fragment>
            <section className="venue">
                <ImageList venueDetail={venue}/>
            </section>
            <div className="sidebar-wrapper">
                <Sidebar type="tips" venueDetail={venue}/>
            </div>
        </React.Fragment> : <Loader/>
}

Здесь - это обновленные коды и окна.

0 голосов
/ 25 апреля 2018

Хорошо. Итак, проблема была в том, что я отправлял свое действие в жизненный цикл componentDidMount, но когда я изменил его обратно на componentWillMount.Оно работает.Может кто-нибудь объяснить, почему?

...