React Bindings
<Subscribe />
Render an Observable into ReactDOM nodes:
<Subscribe observer={observable} initialValue="None">
{value => <p>{value}</p>}
</Subscribe>
bindAction
Render a RxJS Subject into Component method:
increase = bindAction(increase$)
Dependency Injection
<Provider />
Provide the store context to your React App:
<Provider store={store} runEpic={rootEpic}>
<AppRoot />
</Provider>
WithRx
Inject store's state and actions into Component:
@WithRx(
({ counter$ }) => ({ counter: counter$ }),
({ increase$, decrease$, reset$ }) => ({
increase: increase$,
decrease: decrease$,
reset: reset$
})
)
export class CounterComponent extends React.Component {
render() {
const { counter, increase, decrease, reset } = this.props
return (
<div>
<p>{counter}</p>
<button onClick={increase}>Increase</button>
<button onClick={decrease}>Decrease</button>
<button onClick={reset}>Reset</button>
</div>
)
}
}
Epic
lift
Lift operator provide a way to lift a reducer like operator up into RxJS operator.
const reducer = (state, action) => state + action
const liftedReducer = lift(reducer)
liftedReducer(state$, action$)
Or you can lift an operator in Redux style:
const reducer = (state = 0, action) => {
switch (action) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
case 'RESET':
return 0
default:
return state
}
}
const liftedReducer = lift(reducer)
liftedReducer(state$, action$)
It can also be used for direct subscription from state source and action source also:
lift(state$, action$, reducer).subscribe()
combineEpics
Combine epics into one root epic. Allow custom route for relationships between parts of the store:
const counterEpic = ({ counter }) => {}
const todoEpic = ({ todo }) => {}
const shareEpic = ({ counterStore, todosStore }) => {}
const rootEpic = combineEpics(
{ counterStore: counterEpic, todosStore: todoEpic },
shareEpic
)
