Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through.

In the example, we compose three things together, in order to create a powerful component.

1. We map user's click event to on increate and on decrease event streams.

2. We foward those count props to next stream 'loading', it will call ajax api to get Star Wars heros.

3. Last we create a typewriter to get a typing effect,

const CounterWithPersonLoader = compose(
count,
load,
typewriter
)(Counter)

[Recompose] Compose Streams of React Props with Recompose’s compose and RxJS的更多相关文章

  1. [Recompose] Lock Props using Recompose -- withProps

    Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. ...

  2. [Recompose] Make Reusable React Props Streams with Lenses

    If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that st ...

  3. [Recompose] Stream a React Component from an Ajax Request with RxJS

    Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax ...

  4. [Recompose] Transform Props using Recompose --mapProps

    Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...

  5. react Props 验证 propTypes,

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  6. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  7. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

  8. react props与render成员函数

    props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...

  9. React props

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

随机推荐

  1. 如何给table的指定td进行css样式改变

    td:nth-child(){background-color:#; color:#fff;}/*把第3个td的背景设为黑色*/ :nth-child()不止可以给table指定样式 p标签页是可以的 ...

  2. MySQL数据库学习记录

    SELECT子句顺序

  3. CF666E Forensic Examination 广义后缀自动机_线段树合并_树上倍增

    题意: 给定一个串 $S$ 和若干个串 $T_{i}$每次询问 $S[pl..pr]$ 在 $Tl..Tr$ 中出现的最多次数,以及出现次数最多的那个串的编号. 数据范围: 需要离线 题解:首先,很常 ...

  4. (2016北京集训十二)【xsy1542】疯狂求导

    题解: 这题看起来很难...但是实际上并没有想象中的那么难 第一眼看上去不会求导公式怎么办?不要紧,题目背景非常良心的给出了题目中的导数计算公式 求完导合并同类项很恶心怎么办?不要紧,样例解释说明了不 ...

  5. tinymce原装插件源码分析(四)-fullscreen

    fullscreen 作为一款文本编辑器,全屏功能是非常有必要的.在插件中主要是修改一些css style和触发resize事件. style问题(反例): 见github源码:https://git ...

  6. vue项目测试和打包发布

    在线测试:npm run dev 发布打包:npm run build  打包后,代码文件在dist文件夹下面,可以正式发布了,复制到其它web服务器下面,在浏览器用http访问.

  7. springboot ajax返回html

    因为拦截器 或者是 shiro  拦截登陆接口

  8. LAMP环境搭建备忘 -- Apache、pHp 安装 (二)

    上一篇 Linux 已经安装好了,我们选择了 CentOS 7 的最小化安装,即没有图形界面,并且我们在安装时设置了网络连接即能够连上外部网络,还设置了 root 密码.下面我们要在此基础上继续安装 ...

  9. sort排序到底怎么排序

    sort()方法 sort() 方法在适当的位置对数组的元素进行排序,并返回数组. <!DOCTYPE html> <html> <head> <meta c ...

  10. TextView超链接

    这里面涉及两个知识点--超链接和跳转.以下进行逐一解说: 1.实现超链接: 1.1形成超链接文本 public static SpannableString getUserlink(String us ...