react sync

React-Sync

Ein deklarativer Ansatz zum Abrufen von API-Daten mithilfe von HTML5 Fetch

Zweck

react-sync stellt eine einzelne Komponente höherer Ordnung bereit, die zum Abrufen von Daten aus Ihren APIs verwendet wird

Das Rendern der Daten liegt in Ihrer Verantwortung, aber das Aktualisieren der Daten über die API ist so einfach wie das Ändern der Parameter Ihrer Anfrage. Lassen Sie die Komponente den Status des Datenabrufs verwalten.

ReactSync-Requisiten

Name	Beschreibung	Typ	Erforderlich	Standard
URL	Die abzurufende URL ohne Abfrageparameter	Zeichenfolge	Ja
Kopfzeilen	Objekt, das alle Header enthält, die an die Anfrage übergeben werden sollen	Objekt	NEIN	null
Parameter	Objekt, das alle Abfrageparameter enthält, die an die Anfrage übergeben werden sollen	Objekt	NEIN	null
toQueryString	Funktion zum Konvertieren der Abfrageparameter-Requisite in eine Abfragezeichenfolge	Funktion	NEIN	./toQueryString.js
toData	Funktion, die ein Fetch-Antwortobjekt entgegennimmt und ein Versprechen zurückgibt, das in die Daten in der Antwort aufgelöst wird	Funktion	NEIN	gibt standardmäßig eine JSON-Antwort zurück
Kinder	Funktion, die ein Objekt {promise, data, error} entgegennimmt und einen zu rendernden Knoten zurückgibt	Funktion	Ja

Quelle: props.jsx

Kinder-Requisiten

Die an die children Requisite übergebene Funktion erhält den Abrufstatus

Name	Beschreibung	Typ
versprechen	Die ausstehende Zusage, falls noch Anfragen ausstehen	Instanz von Promise
Daten	Daten, die von der API abgerufen wurden	Ergebnis von toData
Fehler	Eventuell aufgetretene Abruffehler	Instanz eines Fehlers

Installieren

npm install --save react-sync

Alternativ baut dieses Projekt auf einem UMD-Modul namens ReactSync auf, sodass Sie ein unpkg-Skript-Tag in Ihre Seite einfügen können

Suchen Sie nach window.ReactSync wenn Sie das UMD-Modul über ein Skript-Tag importieren

Verwendung

Sehen Sie sich die Demo-Quelle zum Beispiel für die Verwendung mit Filterung an

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

Muster

Bei der Verwendung dieser Komponente kommt es auf die Komposition an.

Möchten Sie beispielsweise jede Minute automatisch einen erneuten Abruf durchführen? Erstellen Sie eine Komponente, die ReactSync umschließt und jede Minute einen Zeitstempel-Abfrageparameter aktualisiert.

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

Wie wäre es mit dem Anhängen eines Tokens aus dem Kontext an alle Anfragen?

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

Wie wäre es, wenn Sie einfach eine Basis-URL als Standard festlegen?

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

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