[Recompose] Merge RxJS Button Event Streams to Build a React Counter Component
Combining input streams then using scan
to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.
const CounterStream = componentFromStream(
props$ => { const { stream: onInc$, handler: onInc } = createEventHandler();
const { stream: onDec$, handler: onDec } = createEventHandler(); return props$
.switchMap(
propos => Observable.merge(
onInc$.mapTo(1),
onDec$.mapTo(-1)
)
.startWith(propos.value)
.scan((acc, curr) => acc + curr)
.map((value) => ({ value, onInc, onDec })))
.map(
Counter
)
}
);
[Recompose] Merge RxJS Button Event Streams to Build a React Counter Component的更多相关文章
- [RxJS] Handling Multiple Streams with Merge
You often need to handle multiple user interactions set to different streams. This lesson shows hows ...
- [RxJS] Refactoring Composable Streams in RxJS, switchMap()
Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstr ...
- button JS篇ant Design of react之二
最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
- button JS篇ant Design of react
这篇看ant Desgin of react的button按钮的js代码,js代码部分是typescript+react写的. button组件里面引用了哪些组件: import * as React ...
- [React Native] Build a Github Repositories component
Nav to Repos component from Dashboard.js: goToRepos(){ api.getRepos(this.props.userInfo.login) .then ...
- [React Native] Build a Separator UI component
In this lesson we'll create a reusable React Native separator component which manages it's own style ...
- [MDX] Build a Custom Provider Component for MDX Deck
MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Providerco ...
- [Poi] Customize Babel to Build a React App with Poi
Developing React with Poi is as easy as adding the babel-preset-react-appto a .babelrc and installin ...
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
Functions created with mapPropsStream canned be composed together to build up powerful streams. Brin ...
随机推荐
- swift语言点评十九-类型转化与检查
1.oc比较: -(BOOL) isKindOfClass: classObj判断是否是这个类或者这个类的子类的实例 -(BOOL) isMemberOfClass: classObj 判断是否是这个 ...
- day02变量
一. 什么是变量? 变量:在程序运行过程中,值会发生变化的量.(与之相对应的,常量就是在程序运行过程中,值不会发生变化的量).无论是变量还是常量,在创建时都会在内存中开辟一块空间,用于保存它的值. 二 ...
- JAVA调用接口
HttpUrlconnection部分 //发送JSON字符串 如果成功则返回成功标识. public static String doJsonPost(String urlPath, String ...
- Nginx 安装 自用
hostnamectl set-hostname nginx systemctl stop firewalld.service systemctl disable firewalld.service ...
- Git 修改commit message
1.git log --oneline -5 查看最近5次commit的简要信息,输出信息为:简短commitID commit_message,可以根据需要查看最近n次的提交 也可以git log ...
- ASP.NET-使用事件监视诊断程序异常
用windows自带的事件监视程序来监视网站的异常 来自为知笔记(Wiz)
- 洛谷 P2926 [USACO08DEC]拍头Patting Heads
P2926 [USACO08DEC]拍头Patting Heads 题目描述 It's Bessie's birthday and time for party games! Bessie has i ...
- VS2015--win32project配置的一些想法之cmake
近期两天都在配置一个win32项目.为了实现跨平台,写底层代码的人仅仅build了安卓和ios的工程,没有build win32项目. 因为对一些库不是非常了解.配置起来非常困难,心力交瘁. 为了实现 ...
- MongoDB count distinct group by JavaAPI查询
import java.net.UnknownHostException; import com.mongodb.BasicDBList; import com.mongodb.BasicDBObje ...
- Project Euler:Problem 93 Arithmetic expressions
By using each of the digits from the set, {1, 2, 3, 4}, exactly once, and making use of the four ari ...