react sync

réagir-synchroniser

Une approche déclarative pour récupérer des données API à l'aide de HTML5 Fetch

But

react-sync fournit un seul composant d'ordre supérieur utilisé pour récupérer les données de vos API.

Le rendu des données relève de votre responsabilité, mais actualiser les données depuis l'API est aussi simple que de modifier les paramètres de votre requête. Laissez le composant gérer l’état de récupération des données.

Accessoires ReactSync

Nom	Description	Taper	Requis	Défaut
URL	L'URL à récupérer sans aucun paramètre de requête	chaîne	Oui
en-têtes	Objet contenant tous les entêtes à passer à la requête	objet	Non	null
paramètres	Objet contenant tous les paramètres de requête à passer à la requête	objet	Non	null
versQueryString	Fonction utilisée pour convertir les paramètres de requête en chaîne de requête	fonction	Non	./toQueryString.js
versDonnées	Fonction qui prend un objet de réponse de récupération et renvoie une promesse qui résout les données de la réponse	fonction	Non	renvoie la réponse JSON par défaut
enfants	Fonction qui prend un objet {promise, data, error} et renvoie un nœud à restituer	fonction	Oui

Source : props.jsx

Accessoires pour enfants

La fonction passée à l'accessoire children reçoit l'état de récupération

Nom	Description	Taper
promesse	La promesse en attente si des demandes sont en suspens	instance de promesse
données	Données extraites de l'API	résultat de toData
erreur	Toutes les erreurs de récupération ayant pu se produire	instance d'erreur

Installer

npm install --save react-sync

Alternativement, ce projet s'appuie sur un module UMD nommé ReactSync, vous pouvez donc inclure une balise de script unpkg dans votre page.

Recherchez window.ReactSync lors de l'importation du module UMD via une balise de script

Usage

Voir la source de démonstration pour un exemple d'utilisation avec filtrage

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

Motifs

La composition est reine lors de l’utilisation de ce composant.

Par exemple, souhaitez-vous récupérer automatiquement toutes les minutes ? Créez un composant qui encapsule ReactSync et met à jour un paramètre de requête d'horodatage toutes les minutes.

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

Que diriez-vous de joindre un jeton du contexte à toutes les demandes ?

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

Que diriez-vous simplement de définir par défaut une URL de base ?

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

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