React и AJAX

Недавно я сделал новый сайт Staytube в React и мне нужно было делать Ajax-запросы. Вопрос был в том, как? И какой путь правильный или предпочтительный? Ответ: это зависит: зависит от размера вашего приложения, сложности вашего приложения, от используемых вами инструментов.

Я сам, будучи новичком в React, выбрал довольно простой подход (без Flux / Redux), но подумал, что сделаю небольшую запись.

YouTube API

Staytube - это простой веб-сайт, посвященный отличным полнометражным концертам с YouTube. Я изучаю концепцию Использование YouTube в качестве CMS. Сайт общается с плейлистом на YouTube, делая запросы с помощью YouTube V3 API. Вам понадобится API-ключ для вызова API плейлиста.

Реагировать

Как вы, возможно, знаете, React - это библиотека просмотра и не имеет встроенных сетевых функций. React отображает компоненты, используя данные из свойств и состояния. Если вы хотите использовать некоторые данные с сервера, вам необходимо передать эти данные в свойства или состояние ваших компонентов.

Для выполнения вызовов Ajax вам понадобится библиотека http / xhr. Я посвятил себя использованию обещанного http-клиента Axios.

Другие инструменты, которые вы можете использовать:

• Xhr
• "Принести"
• Суперагент

Установить Axios

npm install axios --save

Установка начального состояния

В React вы можете определить начальное состояние, присвоив this.state в конструкторе. Подробнее о начальном состоянии

class LatestVideos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      error: false,
      videos: [],
      nextpagetoken: '',
      prevpagetoken: '',
    };
    this.fetchVideos = this.fetchVideos.bind(this);
    this.nextPage = this.nextPage.bind(this);
    this.prevPage = this.prevPage.bind(this);
  }

  /* … */

Пойдите, возьмите несколько видео

Итак, у меня есть плейлист, и мне нужно получить из него несколько видео. URL для получения моего плейлиста выглядит так:

https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=30&pageToken=XXXXXXXXXXXXXXXXXX&playlistId=PLUIjiNV9YTmsGucmZPzRrVR1GSlmRQ6pk&key=XXXXXXXXXXXXXXXXXX&alt=json;

Монтаж

Я использую метод жизненного цикла componentDidMount. Этот метод будет выполнен при первом монтировании (добавлении в DOM) компонента. Этот метод выполняется только один раз за время жизни компонента. Подробнее о Методах жизненного цикла React.

У меня есть компонент, отвечающий за получение и перечисление последних видео в моем плейлисте. В этом примере немного упрощено, но вкратце это выглядит так.

/* … */

componentDidMount() {
  this.fetchVideos();
}
fetchVideos(direction) {
  this.setState({
    loading: true,
  });

  const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=30&pageToken=${token}&playlistId=PLUIjiNV9YTmsGucmZPzRrVR1GSlmRQ6pk&key=${apikey}&alt=json`;
  axios.get(url)
    .then(res => {
      this.setState({
        videos: res.data.items,
        loading: false,
      });
    })
    .catch(error => {
      console.log(error);
    });
}

/* … */

Оказывать

Теперь этот компонент отвечает за рендеринг списка видео с использованием их статических эскизов, связанных с каждым видео YouTube.

renderVideos() {
  return this.state.videos.map((video, index) => {

    const videoClip = video.snippet.resourceId.videoId;
    const image = 'https://placehold.it/480x360';
    const alt = video.snippet.title;

    if (video.snippet.hasOwnProperty('thumbnails')) {
      image = video.snippet.thumbnails.high.url;
    }

    return (
    	<div key={ index }>
    		<Link to={ `/videos/${videoClip}` }>
    			<img src={ image } role="presentation" alt={ alt } />
    			<p>
    				{ alt }
    			</p>
    		</Link>
    	</div>
    );
  });
}
render() {
  return (
    <div>
      { this.state.loading ? <div className="loader"></div> : this.renderVideos() }
   	</div>
    )
}

🤔 Вам нужно что-то более подробное?

Эндрю Х. Фармер написал отличный пост React AJAX Best Practices, в котором объясняет четыре хороших способа выполнения Ajax-запросов с помощью React.

Демо?

💥 Оцените Staytube! Код находится на Github, если вы хотите узнать больше.

Изначально размещено на sprintworks.se