nybblr/redux-fusion

React bindings for RxJS and Redux

redux-fusion

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!