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
  • Observing Actions
  • Observing State
  • Combining Observations
  1. Usage

Observing Redux

PreviousInjecting DependenciesNextObserving Anything

Last updated 6 years ago

Before you can observe your Redux store, make sure you have used dependency injection to expose it to your Refract components!

Refract adds a method to your store called observe (see ), which you can use to observe Redux from inside your aperture.

const aperture = (component, initialProps) => {
    const streamFromStore$ = initialProps.store.observe('something')
}

store.observe takes one argument, which can be either a string or a function.

Observing Actions

If you pass in a string, store.observe returns a stream of actions dispatched to your store which have that string as their action type.

const aperture = (component, { store }) => {
    const ping$ = store.observe('PING')
    const pong$ = store.observe('PONG')
}

In this example, ping$ will receive any action with a type of PING which gets dispatched to your store, and pong$ will receive any action with a type of PONG which gets dispatched to your store.

Each observed action is passed into your stream with all its data - including the payload.

Observing State

If you pass in a function, store.observe will treat it as a Redux selector, and return a stream which subscribes to the state using your function, initialised with the selector's current value. Any time the selected slice of state changes, its new value will be piped to your stream if changed (=== comparison).

const storeShape = {
    users: {
        SomeUserName: {
            balance: 999,
            ...user
        }
    }
}

const getBalance = username => state => state.users[username].balance

const aperture = (component, { store }) => {
    const balance$ = store.observe(getBalance('SomeUserName'))
}

In this example, balance$ will receive a new value every time the user's balance changes.

Note that this is particularly powerful in combination with curried selectors - by tweaking the above example to use the initialProps to source the username, we can select the slice of state dynamically:

const aperture = (component, { store, username }) => {
    const balance$ = store.observe(getBalance(username))
}

Combining Observations

As mentioned previously, Refract's API is designed to give you complete control over your side-effects, and you are encouraged to observe multiple sources simultaneously.

Observing both actions and state is a powerful combination which opens up many opportunities for complex functionality to be implemented in a clean and maintainable way.

Getting Started