react sync

reaccionar-sincronizar

Un enfoque declarativo para recuperar datos de API utilizando HTML5 Fetch

Objetivo

react-sync proporciona un único componente de orden superior que se utiliza para obtener datos de sus API

Representar los datos es su responsabilidad, pero actualizar los datos desde la API es tan simple como cambiar los parámetros de su solicitud. Deje que el componente administre el estado de obtención de datos.

Accesorios de ReactSync

Nombre	Descripción	Tipo	Requerido	Por defecto
URL	La URL a buscar sin ningún parámetro de consulta.	cadena	Sí
encabezados	Objeto que contiene todos los encabezados para pasar a la solicitud.	objeto	No	null
parámetros	Objeto que contiene todos los parámetros de consulta para pasar a la solicitud.	objeto	No	null
a cadena de consulta	Función utilizada para convertir los parámetros de consulta prop en una cadena de consulta	función	No	./toQueryString.js
a datos	Función que toma un objeto de respuesta de recuperación y devuelve una promesa que se resuelve en los datos de la respuesta.	función	No	devuelve la respuesta JSON por defecto
niños	Función que toma un objeto {promise, data, error} y devuelve un nodo para ser renderizado	función	Sí

Fuente: props.jsx

Accesorios infantiles

La función pasada a la propiedad children recibe el estado de recuperación.

Nombre	Descripción	Tipo
promesa	La promesa pendiente si hay alguna solicitud pendiente.	instancia de promesa
datos	Datos que se han obtenido de la API	resultado de toData
error	Cualquier error de recuperación que pueda haber ocurrido	instancia de error

Instalar

npm install --save react-sync

Alternativamente, este proyecto se basa en un módulo UMD llamado ReactSync, por lo que puede incluir una etiqueta de script unpkg en su página.

Busque window.ReactSync al importar el módulo UMD mediante una etiqueta de script

Uso

Vea la fuente de demostración para ver un ejemplo de uso con filtrado.

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

Patrones

La composición es el rey cuando se utiliza este componente.

Por ejemplo, ¿quieres recuperar automáticamente cada minuto? Cree un componente que incluya ReactSync y actualice un parámetro de consulta de marca de tiempo cada minuto.

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

¿Qué pasa si adjuntamos un token del contexto a todas las solicitudes?

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

¿Qué tal simplemente establecer una URL base por defecto?

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

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