Tutorial

中文

Terminology

• 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

Quick Start

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

1. Create a simple statless component

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

2. Define Counter’s Behaviour 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]

3. connect behaviour and view

const Counter = counterable(CounterView)

render(
  <Most>
    <Counter />
  </Most>
  , document.getElementById('app'));

Next

• FRP Best Practice

Footnotes

[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' }),
    }
})