Refract
  • Read Me
  • Introduction
    • Why Refract?
    • Core Concepts
    • Thinking In Refract
    • Alternatives
  • Usage
    • Getting Started
    • Installation
    • Connecting To React
    • Observing React, Preact and Inferno
    • Injecting Dependencies
    • Observing Redux
    • Observing Anything
    • Handling Effects
    • Pushing to Props
    • Rendering Components
    • Handling Errors
    • Testing
  • Recipes
    • Dependency Injection
    • Creating An API Dependency
    • Handling state
    • Replacing Redux Connect
  • Examples
    • Debounced fetch
    • Counter
    • Field validation
    • Redux fetch
    • Routing
    • Typeahead
    • Visit time
  • API
    • compose
    • withEffects
    • toProps, asProps
    • useRefract
    • refractEnhancer (Redux)
  • Glossary
  • Feedback
Powered by GitBook
On this page
  • Debounced Fetch
  • Aperture
  • Handler
  • Result
  1. Examples

Debounced fetch

PreviousExamplesNextCounter

Last updated 6 years ago

Debounced Fetch

callbag

most

RxJS

xstream

This basic example renders a single text input which prompts for a GitHub username; the current username of this input is stored in React component state.

Aperture

Only one source is observed:

  • The username prop.

Every time the input's username changes, the new username is passed to the stream. Any blank strings are filtered from the stream, and then the usernames are debounced for one second.

After debouncing, a fetch request is made and resolved; the response of this request is output as an effect with a type of USER_DATA_RECEIVE.

Handler

The Refract handler sets the payload of any effect with a type of USER_DATA_RECEIVE into state, ready to be displayed in the UI.

Result

The end result is a debounced fetch request based on input's current value, with the results rendered to the UI.

code
live
code
live
code
live
code
live