react sync

sincronização de reação

Uma abordagem declarativa para buscar dados de API usando HTML5 Fetch

Propósito

react-sync fornece um único componente de ordem superior usado para buscar dados de suas APIs

A renderização dos dados é de sua responsabilidade, mas atualizar os dados da API é tão simples quanto alterar os parâmetros da sua solicitação. Deixe o componente gerenciar o estado de busca dos dados.

Adereços ReactSync

Nome	Descrição	Tipo	Obrigatório	Padrão
url	O URL a ser buscado sem nenhum parâmetro de consulta	corda	Sim
cabeçalhos	Objeto contendo todos os cabeçalhos a serem passados ​​para a solicitação	objeto	Não	null
parâmetros	Objeto contendo todos os parâmetros de consulta a serem passados ​​para a solicitação	objeto	Não	null
toQueryString	Função usada para converter a propriedade de parâmetros de consulta em uma string de consulta	função	Não	./toQueryString.js
para dados	Função que pega um objeto de resposta de busca e retorna uma promessa que resolve os dados na resposta	função	Não	retorna JSON de resposta por padrão
crianças	Função que pega um objeto {promise, data, error} e retorna um nó para ser renderizado	função	Sim

Fonte: props.jsx

Adereços infantis

A função passada para a propriedade children recebe o estado de busca

Nome	Descrição	Tipo
promessa	A promessa pendente se alguma solicitação estiver pendente	instância de promessa
dados	Dados que foram obtidos da API	resultado de toData
erro	Quaisquer erros de busca que possam ter ocorrido	instância de erro

Instalar

npm install --save react-sync

Como alternativa, este projeto é baseado em um módulo UMD chamado ReactSync, para que você possa incluir uma tag de script unpkg em sua página

Procure window.ReactSync ao importar o módulo UMD por meio de uma tag de script

Uso

Veja a fonte de demonstração para ver um exemplo de uso com filtragem

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

Padrões

A composição é fundamental ao usar este componente.

Por exemplo, deseja buscar novamente automaticamente a cada minuto? Crie um componente que envolva o ReactSync e atualize um parâmetro de consulta de carimbo de data/hora a 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 } } /> ;
  }
}

Que tal anexar um token do contexto a todas as solicitações?

 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 tal padronizar apenas um URL base?

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

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