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
  • Events
  • Time
  • Custom Dependencies
  1. Usage

Observing Anything

PreviousObserving ReduxNextHandling Effects

Last updated 5 years ago

As explained in the documentation, you can add dependencies to your aperture via React props. By passing observable data sources as props, you can observe anything you wish, and trigger side-effects in response.

In addition, your aperture is a blank slate, and allows you to observe anything which exists in the global context such as time or events.

Events

By using your streaming library's utilities aimed at creating observables, you can respond to any events available in JavaScript.

For example, you can observe the window.popstate event to respond to the user clicking back/forward in the browser:

const aperture = component => {
    const popstate$ = fromEvent(window, 'popstate').pipe(
        map(event => ({
            type: 'POPSTATE',
            state: event.state
        }))
    )
}

Or as another example, you could listen to the window.resize event in order to dynamically alter your logic depending on the user's screen size:

const aperture = component => {
    const resize$ = fromEvent(window, 'resize').pipe(debounce(500))
}

Time

Your streaming library will also provide utilities for observing the passing of time.

For example, if you want to do something once every few seconds as a kind of background process, it's easy to create an interval stream:

const aperture = component => {
    const interval$ = interval(4000) // emits once every four seconds
}

Custom Dependencies

It's also possible to create your own dependencies with custom methods similar to our component.observe and store.observe, and expose them through dependency injection via props. If you do, please publish them so that others can use it too!

dependency injection