Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components.

Using componentFromStream:

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const CounterWithInterval = componentFromStream(
props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({count, ...props})
)
.map(Counter)
) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))

MapPropsStream allows you to create functions that will decorate your component, rather than creating a component itself. I'm going to create an interval here using MapPropsStream.

A mapProposStream version can be like this:

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const interval = mapPropsStream(props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({ count, ...props })
)) const CounterWithInterval = interval(Counter) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))

As you can see, we take the hightlighted part as own function, wrapped with 'mapPropsStream'.

[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream的更多相关文章

  1. [React] Recompose: Theme React Components Live with Context

    SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...

  2. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  3. [Recompose] Stream Props to React Children with RxJS

    You can decouple the parent stream Component from the mapped React Component by using props.children ...

  4. [Recompose] Configure Recompose to Build React Components from RxJS Streams

    Recompose provides helper functions to stream props using an Observable library of your choice into ...

  5. Akka(18): Stream:组合数据流,组件-Graph components

    akka-stream的数据流可以由一些组件组合而成.这些组件统称数据流图Graph,它描述了数据流向和处理环节.Source,Flow,Sink是最基础的Graph.用基础Graph又可以组合更复杂 ...

  6. [React] Create a Query Parameter Modal Route with React Router

    Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...

  7. [React] Make Controlled React Components with Control Props

    Sometimes users of your component want to have more control over what the internal state is. In this ...

  8. [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 ...

  9. [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this les ...

随机推荐

  1. NYOJ 16 矩形嵌套【DP】

    解题思路:呃,是看的紫书上面的做法,一个矩形和另一个矩形之间的关系就只有两种,(因为它自己是不能嵌套自己的),可嵌套,不可嵌套,是一个二元关系,如果可嵌套的话,则记为1,如果不可嵌套的话则记为0,就可 ...

  2. 定时清理clientmqueue目录垃圾文件防止占满磁盘空间

    RedHat/CentOS 5.8 默认就有sendmail,而6.4默认没有.   手动清理方法: find /var/spool/clientmqueue/ -type f|xargs rm -f ...

  3. 优动漫PAINT-百褶裙绘制教程

    不论是萌系水手服还是洋气学院风,一定少不了百褶裙的绘制.不同的群褶,会呈现不同的视觉效果.裙褶的结构在舒展和重叠的时候也存在不一样的绘制技巧.让我们一起通过这篇教程,看看百褶裙是如何绘制的吧~ 作者: ...

  4. Oralce中的package和package body

    1.Oracle Package的作用: 可以简化应用设计.提高应用性能.实现信息隐藏.子程序重载 2.ORACLE中的function   .package.package   bodies.pro ...

  5. Nginx 安装 自用

    hostnamectl set-hostname nginx systemctl stop firewalld.service systemctl disable firewalld.service ...

  6. C语言中头文件尖括号和引号的区别

    用include 引用头文件时,双引号和尖括号的区别: 1.双引号:引用非标准库的头文件,编译器首先在程序源文件所在目录查找,如果未找到,则去系统默认目录查找,通常用于引用用户自定义的头文件. 2.尖 ...

  7. NYIST 531 太空飞行计划

    太空飞行计划 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述        W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利 ...

  8. js面向对象编程:怎样定义常量?

    js中有一个keywordconst,但眼下的浏览器似乎还不支持,假设一定要定义一些常量,事实上能够使用闭包,匿名函数实现常量的定义. 比如: var Class = (function() { va ...

  9. hibernate动态表名映射--仅仅有想不到,没有做不到

    近期的一个项目有一个需求,有N个考核单位,要对每一个考核单位生成一张考核情况表.这样做的目的是横切数据库,这这个需求的实现中,我的组员遇到了一个技术问题,我将我的解决的方法和整个思考过程与大家分享, ...

  10. BZOJ 3130 二分+网络流

    思路: 不被题目忽悠就是思路 二分一下max 判一下等不等于最大流 搞定 7 9 1 1 2 3 1 3 3 2 3 3 3 4 2 3 5 2 3 6 1 4 7 2 5 7 2 6 7 2 这里有 ...