[Recompose] Make Reusable React Props Streams with Lenses

转载于 2017-12-28 03:21:00 发布 · 69 阅读

文章标签：

本文介绍如何通过Ramda库中的Lens来配置Props流，从而实现React组件Props流的复用，提高代码灵活性及可维护性。文章展示了如何定义特定的Lens，并结合RxJS创建动态Props流的具体实践。

If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that stream with any other components. Configuring your props stream with lenses will allow you to reuse your stream with any React component.

Checkout: lensProp, lensPath.

const personNameLens = R.lensPath([
  "person",
  "name"
])

const typewriter = lens =>
  mapPropsStream(props$ =>
    props$.switchMap(
      props =>
        Observable.zip(
          Observable.from(R.view(lens, props)),
          Observable.interval(100),
          letter => letter
        ).scan((acc, curr) => acc + curr),
      (props, name) => R.set(lens, name, props)
    )
  )

const DateDisplay = props => <h1>{props.date}</h1>
const dateLens = R.lensProp("date")
const DateTypewriter = typewriter(dateLens)(
  DateDisplay
)