react sync

ตอบสนองการซิงค์

วิธีการประกาศในการดึงข้อมูล API โดยใช้ HTML5 Fetch

วัตถุประสงค์

react-sync มอบองค์ประกอบลำดับที่สูงกว่าเพียงองค์ประกอบเดียวที่ใช้สำหรับการดึงข้อมูลจาก API ของคุณ

การเรนเดอร์ข้อมูลถือเป็นความรับผิดชอบของคุณ แต่การรีเฟรชข้อมูลจาก API นั้นทำได้ง่ายเพียงแค่เปลี่ยนพารามิเตอร์ของคำขอของคุณ ปล่อยให้องค์ประกอบจัดการสถานะการดึงข้อมูล

อุปกรณ์ประกอบฉาก ReactSync

ชื่อ	คำอธิบาย	พิมพ์	ที่จำเป็น	ค่าเริ่มต้น
URL	URL ที่จะดึงข้อมูลโดยไม่มีพารามิเตอร์การค้นหาใดๆ	เชือก	ใช่
ส่วนหัว	ออบเจ็กต์ที่มีส่วนหัวทั้งหมดที่จะส่งผ่านไปยังคำขอ	วัตถุ	เลขที่	null
พารามิเตอร์	ออบเจ็กต์ที่มีพารามิเตอร์การค้นหาทั้งหมดที่จะส่งผ่านไปยังคำขอ	วัตถุ	เลขที่	null
toQueryString	ฟังก์ชันที่ใช้ในการแปลงเสาพารามิเตอร์การสืบค้นเป็นสตริงการสืบค้น	การทำงาน	เลขที่	./toQueryString.js
ไปยังข้อมูล	ฟังก์ชันที่รับออบเจ็กต์การตอบสนองการดึงข้อมูลและส่งคืนสัญญาที่จะแก้ไขข้อมูลในการตอบกลับ	การทำงาน	เลขที่	ส่งคืนการตอบกลับ JSON ตามค่าเริ่มต้น
เด็ก	ฟังก์ชั่นที่รับวัตถุ {promise, data, error} และส่งคืนโหนดที่จะเรนเดอร์	การทำงาน	ใช่

ที่มา: props.jsx

อุปกรณ์ประกอบฉากเด็ก

ฟังก์ชั่นที่ส่งผ่านไปยังอุปกรณ์ children จะได้รับสถานะการดึงข้อมูล

ชื่อ	คำอธิบาย	พิมพ์
สัญญา	สัญญาที่รอดำเนินการหากมีคำขอใด ๆ ที่ค้างชำระ	ตัวอย่างของสัญญา
ข้อมูล	ข้อมูลที่ถูกดึงมาจาก API	ผลลัพธ์ของ toData
ข้อผิดพลาด	ข้อผิดพลาดในการดึงข้อมูลใด ๆ ที่อาจเกิดขึ้น	อินสแตนซ์ของข้อผิดพลาด

ติดตั้ง

npm install --save react-sync

อีกทางหนึ่งโปรเจ็กต์นี้สร้างเป็นโมดูล UMD ชื่อ ReactSync ดังนั้นคุณจึงสามารถรวมแท็กสคริปต์ unpkg ในเพจของคุณได้

มองหา window.ReactSync เมื่อนำเข้าโมดูล UMD ผ่านแท็กสคริปต์

การใช้งาน

ดูแหล่งสาธิตตัวอย่างการใช้งานพร้อมตัวกรอง

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

รูปแบบ

องค์ประกอบเป็นสิ่งสำคัญเมื่อใช้ส่วนประกอบนี้

ตัวอย่างเช่น ต้องการดึงข้อมูลทุกนาทีโดยอัตโนมัติหรือไม่ สร้างส่วนประกอบที่ล้อมรอบ ReactSync และอัปเดตพารามิเตอร์การค้นหาการประทับเวลาทุกนาที

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

แล้วการแนบโทเค็นจากบริบทกับคำขอทั้งหมดล่ะ

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

แล้วค่าเริ่มต้นของ URL พื้นฐานล่ะ?

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

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