API

API

connect

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

props is optional, it will become default props of Component connect returned

connect return a fucntion, which you can apply to Component later.

example:

import {connect} from 'react-most'

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

since connect() return a function, you can decorate it to React Class as well

@connect((intent$)=>{
  return {
    add: () => ({type: 'add'})
  }
})
class Example extends React.Component {
...

data flow

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

let RxCounter = connect(function(intent$){
  let defaultState$ = most.of(_=>({value:0}))
  let addSink$ = intent$.filter(x=>x.type=='add').map(({increment})=>state=>({value: state.value+increment}))
  return {
    add: increment=>({type: 'add', increment}),
    defaultState$,
    addSink$,
  }
})(Counter);

sinks are Stream, action will be called whenever you wan to send something into Intent Stream.

History

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

wrapper

wrapper wrap you App, so it can provide actions, and setState for you. new state will pass to you App via props. you don't have to care about state then, only to compose a clean data flow.

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

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.