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
  • Routing
  • Aperture
  • Handler
  • Result
  1. Examples

Routing

Routing

callbag

most

RxJS

xstream

In this example, a set of tabs are rendered to the screen, with the currently active tab stored in React state.

Aperture

Two sources are observed in this example:

  • The setActiveTab callback function.

  • The window.popstate event.

In addition, a single event is fired when the aperture initiates, which sets the initial state to initialProps.activeTab.

All three are simply mapped to objects with the desired structure, and merged into a single stream.

Handler

If the effect's type is NAVIGATION, the handler calculates the new browser url, and pushes it to window.history.

If the effect's type is STATE, it calls setActiveTab with the new state.

Result

The end result is a set of tabs whose state is pushed to the browser url as a side-effect.

PreviousRedux fetchNextTypeahead

Last updated 5 years ago

code
live
code
live
code
live
code
live