react sync

sinkronisasi reaksi

Pendekatan deklaratif untuk mengambil data API menggunakan HTML5 Fetch

Tujuan

react-sync menyediakan satu komponen tingkat tinggi yang digunakan untuk mengambil data dari API Anda

Merender data adalah tanggung jawab Anda, namun menyegarkan data dari API semudah mengubah parameter permintaan Anda. Biarkan komponen mengelola status pengambilan data.

Alat Peraga ReactSync

Nama	Keterangan	Jenis	Diperlukan	Bawaan
url	Url yang akan diambil tanpa parameter kueri apa pun	rangkaian	Ya
header	Objek yang berisi semua header untuk diteruskan ke permintaan	obyek	TIDAK	null
param	Objek yang berisi semua parameter kueri untuk diteruskan ke permintaan	obyek	TIDAK	null
keQueryString	Fungsi yang digunakan untuk mengonversi prop parameter kueri menjadi string kueri	fungsi	TIDAK	./toQueryString.js
ke Data	Fungsi yang mengambil objek respons pengambilan dan mengembalikan janji yang menyelesaikan data dalam respons	fungsi	TIDAK	mengembalikan respons JSON secara default
anak-anak	Fungsi yang mengambil objek {promise, data, error} dan mengembalikan node untuk dirender	fungsi	Ya

Sumber: props.jsx

Alat Peraga Anak

Fungsi yang diteruskan ke prop children menerima status pengambilan

Nama	Keterangan	Jenis
janji	Janji yang tertunda jika ada permintaan yang belum terselesaikan	contoh Janji
data	Data yang telah diambil dari API	hasil dari toData
kesalahan	Kesalahan pengambilan apa pun yang mungkin terjadi	contoh Kesalahan

Memasang

npm install --save react-sync

Sebagai alternatif, proyek ini dibangun ke modul UMD bernama ReactSync, sehingga Anda dapat menyertakan tag skrip unpkg di halaman Anda

Cari window.ReactSync saat mengimpor modul UMD melalui tag skrip

Penggunaan

Lihat sumber demo untuk contoh penggunaan dengan pemfilteran

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

Pola

Komposisi adalah raja ketika menggunakan komponen ini.

Misalnya, ingin mengambil ulang secara otomatis setiap menit? Buat komponen yang membungkus ReactSync dan perbarui parameter kueri stempel waktu setiap menit.

 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 } } /> ;
  }
}

Bagaimana dengan melampirkan token dari konteks ke semua permintaan?

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

Bagaimana kalau menetapkan URL dasar secara default?

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

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