react sync

反應同步

使用 HTML5 Fetch 取得 API 資料的聲明式方法

目的

react-sync提供了一個高階元件，用於從 API 中取得數據

呈現資料是您的責任，但從 API 刷新資料就像更改請求的參數一樣簡單。讓元件管理獲取資料的狀態。

ReactSync 道具

姓名	描述	類型	必需的	預設
網址	不帶任何查詢參數的 url 獲取	細繩	是的
標頭	包含要傳遞給請求的所有標頭的對象	目的	不	null
參數	包含要傳遞給請求的所有查詢參數的對象	目的	不	null
到查詢字串	用於將查詢參數 prop 轉換為查詢字串的函數	功能	不	./toQueryString.js
數據	接受獲取響應對象並返回解析為響應中的資料的承諾的函數	功能	不	預設回傳響應 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 >
) ; 

圖案

使用此組件時，組合才是王道。

例如，想要每分鐘自動重新獲取一次？建立一個包裝 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 ( '/' ) } />
) ;