redux-fusion

Update Two Years Later

It's come to my attention this POC no longer works with current versions of React and Redux. This project unfortunately remained only simply to support the conceputal article written on Medium in April 2017. Fortunately, there are now other libraries using similar concepts, namely RefractJS. Happy observing!

What is this?

This module is a higher order component that serves as an alternative to react-redux connect. There is no additional buy in, all of your redux modules and containers can remain as-is. You could even wrap an existing connected component with fuse() if desired.

How it works

Redux createStore is observable so it is straight forward to access store from root <Provider> context, convert to a state$ observable and subscribe the wrapped component's props via mapPropsStream(). See recompose's Observable utilities for more details.

The end result is developer ability to use bi-directional reactive programming to combine state and UI streams:

Usage Example

import React from 'react'
import { createEventHandler } from 'recompose'
import fuse from 'redux-fusion'
import { someReduxAction } from '../redux/actions'

const hello$ = (state$, dispatch) => (props$) => {
  const {
     handler: handleClick,
     stream: click$
  } = createEventHandler()

  click$
    .debounceTime(300)
    .subscribe(() => dispatch(someReduxAction()))

  const hello$ = state$
    .pluck('hello')
    .map(val => `Hello ${val}`)

  return props$.combineLatest(hello$, (props, hello) => ({
    hello,
    handleClick
  }))   
}

const Hello = ({ handleClick, hello }) =>
  (
    <div>
      <h3>{hello}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  )

const HelloWorld = fuse(hello$)(Hello)

Stay tuned for more real life examples!