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)
