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. SpringBoot学习笔记(16)----SpringBoot整合Swagger2

    Swagger 是一个规范和完整的框架,用于生成,描述,调用和可视化RESTful风格的web服务 http://swagger.io Springfox的前身是swagger-springmvc,是 ...

  2. 紫书 习题 8-1 UVa 1149(贪心)

    排序之后, 尽量最小和最大的放在一个背包, 放不下就放最大的. #include<cstdio> #include<algorithm> #define REP(i, a, b ...

  3. WPF打字机效果

    public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); TypewriteTex ...

  4. SVN学习总结(2)——SVN冲突解决

    在我们用VS进行项目合作开发的过程中,SVN的提交控制是至关重要的,大家不可避免的都遇到过SVN冲突的问题,开发的时候,应该认真学习SVN的知识,减少冲突,集中时间放在开发上. 解决冲突有三种方式: ...

  5. LaTeX 写算法伪码

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50054953 LaTeX写算法伪码,需 ...

  6. JAVA SSL

    http://docs.oracle.com/javase/1.5.0/docs/guide/security/jsse/JSSERefGuide.html#InstallationAndCustom ...

  7. Qt之自定义布局管理器(QFlowLayout)

    简述 QFlowLayout,顾名思义-流布局,实现了处理不同窗口大小的布局.根据应用窗口的宽度来进行控件放置的变化. 具体实现要求不再赘述,请参考前两节内容. 简述 实现 效果 源码 实现 QFlo ...

  8. Linux环境安装phpredis扩展

    php訪问redis须要安装phpredis扩展.phpredis是用纯C语言写的. phpredis下载地址 https://github.com/phpredis/phpredis 最新的版本号是 ...

  9. Java IO(二) 之 InputStream

    源代码均以JDK1.8作为參考 前言: InputStream实现了两个接口Closeable和AutoCloseable: Closeable:JDK1.5中引入,Closeable接口中仅仅有一个 ...

  10. Vue简单用法目录总结 以及 前端基础总结传送门:

    Vue官方网址:https://cn.vuejs.org/ Vue 第三方组件:Element:http://element-cn.eleme.io/#/zh-CN Vue 基础指令以及自定义指令:h ...