react sync

реакция-синхронизация

Декларативный подход к получению данных API с помощью HTML5 Fetch.

Цель

react-sync предоставляет один компонент более высокого порядка, используемый для получения данных из ваших API.

Вы несете ответственность за рендеринг данных, но обновить данные из API так же просто, как изменить параметры вашего запроса. Позвольте компоненту управлять состоянием получения данных.

Реквизит ReactSync

Имя	Описание	Тип	Необходимый	По умолчанию
URL	URL-адрес для получения без каких-либо параметров запроса.	нить	Да
заголовки	Объект, содержащий все заголовки для передачи в запрос	объект	Нет	null
параметры	Объект, содержащий все параметры запроса для передачи в запрос.	объект	Нет	null
toQueryString	Функция, используемая для преобразования реквизита параметров запроса в строку запроса.	функция	Нет	./toQueryString.js
toData	Функция, которая принимает объект ответа на выборку и возвращает обещание, которое преобразуется в данные в ответе.	функция	Нет	по умолчанию возвращает ответ в формате JSON
дети	Функция, которая принимает объект {promise, data, error} и возвращает узел для визуализации.	функция	Да

Источник: props.jsx

Детский реквизит

Функция, переданная в свойство children , получает состояние выборки.

Имя	Описание	Тип
обещать	Ожидаемое обещание, если какие-либо запросы остаются невыполненными	экземпляр обещания
данные	Данные, полученные из API	результат toData
ошибка	Любые ошибки выборки, которые могли возникнуть.	экземпляр ошибки

Установить

npm install --save react-sync

В качестве альтернативы этот проект строится на модуле UMD с именем ReactSync, поэтому вы можете включить тег сценария unpkg на свою страницу.

Ищите window.ReactSync при импорте модуля UMD через тег сценария.

Использование

См. демонстрационный источник, например использование с фильтрацией.

 import React from 'react' ;
import ReactSync from 'react-sync' ;

const StarGazers = ( { owner , repo , githubToken } ) => (
  < ReactSync 
    url = { `https://api.github.com/repos/ ${ owner } / ${ repo } /stargazers` } 
    headers = { { Authorization : `token ${ githubToken } ` } } >
    {
      ( { promise , data , error } ) => (
        < span >
          { promise !== null ? 'Loading...' : data }      
        </ span >
      )
    }
  </ ReactSync >
) ; 

Узоры

Композиция имеет решающее значение при использовании этого компонента.

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

 import React , { Component } from 'react' ;
import PropTypes from 'prop-types' ;
import Sync from 'react-sync' ;

const now = ( ) => ( new Date ( ) ) . getTime ( ) ;

export default class RefreshSync extends Component {
  static propTypes = {
    refreshEvery : PropTypes . number
  } ;

  _timer = null ;
  state = {
    _ts : now ( )
  } ;

  triggerNextRefresh = after => {
    clearTimeout ( this . _timer ) ;
    this . _timer = setTimeout ( this . refresh , after ) ;
  } ;

  refresh = ( ) => {
    this . setState ( { _ts : now ( ) } ) ;
    this . triggerNextRefresh ( this . props . refreshEvery ) ;
  } ;

  componentDidMount ( ) {
    this . triggerNextRefresh ( this . props . refreshEvery ) ;
  }

  componentWillReceiveProps ( { refreshEvery } ) {
    if ( refreshEvery !== this . props . refreshEvery ) {
      this . triggerNextRefresh ( refreshEvery ) ;
    }
  }

  render ( ) {
    const { params , ... rest } = this . props ,
      { _ts } = this . state ;

    return < Sync { ... rest } params = { { ... params , _ts } } /> ;
  }
}

А как насчет прикрепления токена из контекста ко всем запросам?

 import React , { Component } from 'react' ;
import PropTypes from 'prop-types' ;
import Sync from 'react-sync' ;

export default class AuthenticatedSync extends Component {
  static contextTypes = {
    token : PropTypes . string
  } ;

  render ( ) {
    const { headers , ... rest } = this . props ,
      { token } = this . context ;

    return (
      < Sync
        { ... rest }
        headers = { {
          ... headers ,
          Authorization : token ? `Bearer ${ token } ` : null
        } }
      />
    ) ;
  }
}

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

 import React from 'react' ;
import Sync from 'react-sync' ;

export const MyApiSync = ( { path , ... rest } ) => (
  < Sync { ... rest } url = { [ 'https://my-api.com' , path ] . join ( '/' ) } />
) ;