API

connect

connect(dataFlow: (intent$, props) => {sink$, function...}, [, props]): ReactClass => ReactClass

connect mean to connect some behavior to a React Component, you can think it as a HOC wrapper or decorator,

return ReactClass => ReactClass

it return a function map a React Class to a new React Class, with all behavior define in dataFlow

import {connect} from 'react-most'

class TodoItem extends React.Component {
  ...
}
export default connect(function(intent$){
 let sink$ = intent$.filter(...).map(....)
 return {sink$}
})(TodoItem)

parameters dataFlow [, props]

data flow (intent$, props) => {sink$, function...}

data flow is user define flow or behavior for intent stream, must return a object contains actions or sinks

let RxCounter = connect(function(intent$){
  let addSink$ = intent$.filter(x=>x.type=='add').map(({increment})=>state=>({value: state.value+increment}))
  return {
    add: increment=>({type: 'add', increment}),   // <-- define a action, Counter can trigger a action by invoke props.actions.add()
    addSink$, // <-- define a behavior when someone intent to trigger a "add" action
  }
})(Counter);

a sink$ must be a state trasform stream, in this case it's Stream contains state=>({value: state.value+increment})

you can get props from state transformer as well

(state, props)=>({value: state.value+props.increment})

props

the props of the wrapper component, e.g. in the last example, so if you provide someprops for RxCounter

<RxCounter someprops={true} />

you can get the props via this parameter

connect(function(intent$, props){
  // use props somewhere
})(Counter);

Most Provider

Most provider provide a intent$ stream container, all component inside the provider will share the same intent$ stream.

import Most from 'react-most'
<Most>
  <Counter />
</Most>

History [experimental]

connect(intent$=>[awesome flow], {history:true})(App)

or

<App history={true}>
</App>

once you connect history to App, you have two extract methods from props

1. props.history.backward
2. props.history.forward

Reactive engine [experimental]

if you are Rx user, optionally you can pass a engine props into Most.

import Most from 'react-most'
<Most engine={function rxify() {
  let addToIntentStream = subject.onNext;
  let intentStream = new Rx.Subject();

  function flatObserve(intentSinks, f){
    return Rx.Observable.from(intentSinks).mergeAll().observe(f);
  }
  return {intentStream, addToIntentStream, flatObserve}
}}>
  <Counter />
</Most>

other reactive lib user can easily proivde you favor engine by simply provide these 3 things:

1. intentStream: a Steam contains intents
2. historyStream: a Stream contains history
3. flatObserve(sinks,func): flat Stream of Stream sinks, and observe with func.