FRP Best Practice

Functional Best Practice in xReact

中文

I’ll guide you to some good practice of Functional Programming through the Counter example.

It’s really helpful even you don’t use xreact, the FP idea is common and applicable to anywhere even for redux project.

use Union Type to define Intent

union-type is a awesome library to define union type/case class.

most flux-like library will define Intents using the keyword `type`

inc: () => ({type: 'inc'})

but union type fit perfectly to define Intent

Intent.js

import Type from 'union-type'
export default Type({
  Inc: []
  Dec: []
})

case Intent, not switch

it’s like case class in scala, you get a lot of benefit by using union-type Intent

import Intent from 'intent'
const counterable = x(intent$ => {
    return {
        sink$: intent$.map(Intent.case({
            Inc: () => state => ({count: state.count + 1}),
            Dec: () => state => ({count: state.count - 1}),
            _: () => state => state
        })),
        actions: {
            inc: Intent.Inc,
            dec: Intent.Dec,
        }
    }
})

pattern match case class

like scala, union type can also contain values

import Type from 'union-type'
export default Type({
  Inc: [Number]
  Dec: [Number]
})

if you define Intent constructors, you will be able to destruct them via case

import Intent from 'intent'
const counterable = x(intent$ => {
    return {
        sink$: intent$.map(Intent.case({
            Inc: (value) => state => ({count: state.count + value}),
            Dec: (value) => state => ({count: state.count - value}),
            _: () => state => state
        })),
        actions: {
            inc: Intent.Inc,
            dec: Intent.Dec,
        }
    }
})

lens

lens is composable, immutable, functional way to view, update your state

you can use lens implemented by ramda, or update in lodash

import {lens, over, inc, dec, identity} from 'ramda'
const counterable = x(intent$ => {
    let lensCount = lens(prop('count'))
    return {
        sink$: intent$.map(Intent.case({
            Inc: () => over(lensCount, inc)
            Dec: () => over(lensCount, dec),
            _: () => identity
        }))
    }
})

flatMap

when the value is async, e.g. promise

it could be response from rest request, or other async IO

import when from 'when'
import {just, from, lens, over, set, inc, dec, identity, compose} from 'ramda'
const counterable = x(intent$ => {
    let lensCount = lens(prop('count'))
    return {
        sink$: intent$.map(Intent.case({
            Inc: () => over(lensCount, inc)
            Dec: () => over(lensCount, dec),
            _: () => identity
        }))
        data$: just(0)
            .flatMap(compose(from, when))  // <-- when is a async value
            .map(set(lensCount))
    }
})

Composable wrapper

x wrappers are composable, just like functions

import Type from 'union-type'
export default Type({
    Inc: [Number],
    Dec: [Number],
    Double: [],
    Half: []
})

create a new wrapper with some kind of behaviors

const doublable = x(intent$ => {
    let lensCount = lens(prop('count'))
    return {
        sink$: intent$.map(Intent.case({
            Double: () => over(lensCount, x=>x*2)
            Half: () => over(lensCount, x=>X/2),
            _: () => identity,
        }))
        actions: {
            double: Intent.Double,
            half: Intent.Half,
        }
    }
})

compose doublable and increasable

const Counter = doublable(increasable(CounterView))

CounterView then get both abilities of double/half and inc/dec

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

now our FRP counter example will become something like this