react sync

반응 동기화

HTML5 Fetch를 사용하여 API 데이터를 가져오는 선언적 접근 방식

목적

react-sync API에서 데이터를 가져오는 데 사용되는 단일 고차 구성 요소를 제공합니다.

데이터 렌더링은 귀하의 책임이지만 API에서 데이터를 새로 고치는 것은 요청 매개변수를 변경하는 것만큼 간단합니다. 구성 요소가 데이터 가져오기 상태를 관리하도록 합니다.

ReactSync 소품

이름	설명	유형	필수의	기본
URL	쿼리 매개변수 없이 가져올 URL	끈	예
헤더	요청에 전달할 모든 헤더를 포함하는 객체	물체	아니요	null
매개변수	요청에 전달할 모든 쿼리 매개변수가 포함된 객체	물체	아니요	null
toQueryString	쿼리 매개변수 prop을 쿼리 문자열로 변환하는 데 사용되는 함수	기능	아니요	./toQueryString.js
데이터로	가져오기 응답 객체를 취하고 응답의 데이터를 확인하는 약속을 반환하는 함수	기능	아니요	기본적으로 응답 JSON을 반환합니다.
어린이들	{promise, data, error} 객체를 취하고 렌더링할 노드를 반환하는 함수	기능	예

출처: props.jsx

어린이 소품

children prop에 전달된 함수는 fetch 상태를 받습니다.

이름	설명	유형
약속하다	요청이 처리되지 않은 경우 보류 중인 약속	약속의 인스턴스
데이터	API에서 가져온 데이터	toData 의 결과
오류	발생했을 수 있는 모든 가져오기 오류	오류 인스턴스

설치하다

npm install --save react-sync

또는 이 프로젝트는 ReactSync라는 UMD 모듈로 빌드되므로 페이지에 unpkg 스크립트 태그를 포함할 수 있습니다.

스크립트 태그를 통해 UMD 모듈을 가져올 때 window.ReactSync 를 찾으세요.

용법

필터링 사용 예는 데모 소스를 참조하세요.

 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 >
) ; 

패턴

이 구성 요소를 사용할 때는 구성이 가장 중요합니다.

예를 들어 1분마다 자동으로 다시 가져오고 싶나요? ReactSync를 래핑하고 1분마다 타임스탬프 쿼리 매개변수를 업데이트하는 구성요소를 만듭니다.

 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 ( '/' ) } />
) ;