react sync

反応同期

HTML5 Fetch を使用して API データをフェッチする宣言型アプローチ

目的

react-sync API からデータを取得するために使用される単一の高次コンポーネントを提供します。

データのレンダリングはユーザーの責任ですが、API からのデータの更新はリクエストのパラメーターを変更するのと同じくらい簡単です。データのフェッチ状態をコンポーネントに管理させます。

ReactSync の小道具

名前	説明	タイプ	必須	デフォルト
URL	クエリパラメータを指定せずに取得する URL	弦	はい
ヘッダー	リクエストに渡すすべてのヘッダーを含むオブジェクト	物体	いいえ	null
パラメータ	リクエストに渡すすべてのクエリパラメータを含むオブジェクト	物体	いいえ	null
toQueryString	クエリパラメータpropをクエリ文字列に変換するために使用される関数	関数	いいえ	./toQueryString.js
toData	フェッチ応答オブジェクトを受け取り、応答内のデータに解決される Promise を返す関数	関数	いいえ	デフォルトで応答 JSON を返します
子供たち	オブジェクト{promise, data, error}を受け取り、レンダリングされるノードを返す関数	関数	はい

ソース: props.jsx

子供用小道具

childrenプロパティに渡された関数はフェッチ状態を受け取ります

名前	説明	タイプ
約束	未処理のリクエストがある場合の保留中のプロミス	Promise のインスタンス
データ	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 をラップし、タイムスタンプ クエリ パラメーターを毎分更新するコンポーネントを作成します。

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