中文

• Action: a action can create a Intent and send to Intent Stream
• Intent Stream: a time line of all kinds of Intent created by Action
• Sink a time line of transforms of state e.g. --- currentState => nextState --->
• State simply a react component state

I’ll use the simple counter as example to give you simple idea of react-most.

basically you can follow the simple 3 steps when using `react-most`.

1. create a simple stateless component or should i say View
2. create a behavior wrapper
3. wrap behavior to view

if this example is too simple to you, you can always refer to various of Examples and the simple API

the CounterView is so simple, it

• only display props.count
• click the button will trigger actions in props.actions

const CounterView = props => (
 <div>
 <button onClick={props.actions.dec}>-</button>
 <span>{props.count}</span>
 <button onClick={props.actions.inc}>+</button>
 </div>
)

props.actions is from react-most Connect wrapper

a Connect(Counter) wrapper will describe Counter View’s behavior

1. a counter can have actions of inc or dec, which will send a object of {type: 'inc'} or {type:'dec'} to Intent Stream if it’s been call
2. a counter reactively generate state transform function when recieve intent of type inc or dec.

we can use connect function to create the Connect wrapper

const counterable = connect((intent$) => {
 return {
 sink$: intent$.map(intent => {
 switch (intent.type) {
 case 'inc':
 return state => ({ count: state.count + 1 });
 case 'dec':
 return state => ({ count: state.count - 1 });
 default:
 return _ => _;
 }
 }),
 actions:{
 inc: () => ({ type: 'inc' }),
 dec: () => ({ type: 'dec' }),
 }
 }
})

connect accept a function return sink$ and actions

NOTE that the name sink$ is not convention but actions is convention to group all it’s actions.[fn:1]

const Counter = counterable(CounterView)
render(
 <Most>
 <Counter />
 </Most>
 , document.getElementById('app'));

• FRP Best Practice

[fn:1]

• you can return multiple sinks as well for example
• you can also not group actions

const counterable = connect((intent$) => {
 return {
 incSink$: intent$.filter(i=>i.type==='inc')
 .map(()=> state => ({ count: state.count + 1 })),
 decSink$: intent$.filter(i=>i.type==='dec')
 .map(()=> state => ({ count: state.count - 1 })),
 inc: () => ({ type: 'inc' }),
 dec: () => ({ type: 'dec' }),
 }
})