[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 response and pass it along the stream to use as props in a React Component.
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import rxjsConfig from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream
} from "recompose" setObservableConfig(rxjsConfig) const personById = id =>
`https://swapi.co/api/people/${id}` const Card = props => (
<div>
<h1>{props.name}</h1>
<h2>{props.homeworld}</h2>
</div>
) const loadById = id =>
Observable.ajax(personById(id))
.pluck("response")
.switchMap(
response =>
Observable.ajax(response.homeworld)
.pluck("response")
.startWith({ name: "" }),
(person, homeworld) => ({
...person,
homeworld: homeworld.name
})
) const CardStream = componentFromStream(props$ =>
props$
.switchMap(props => loadById(props.id))
.map(Card)
) const App = () => (
<div>
<Card name="John" homeworld="Earth" />
<CardStream id={1} />
<CardStream id={12} />
<CardStream id={10} />
<CardStream id={24} />
</div>
) render(<App />, document.getElementById("root"))
SwitchMap has second param which is a selector function, take two params, first is outter observable, in the example refers to Person response, second is inner observable, in the example refer to homeworld response. Then combine to one single response.
[Recompose] Stream a React Component from an Ajax Request with RxJS的更多相关文章
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- 学习React系列(一)——React.Component 生命周期
挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...
- [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 ...
- React.js Tutorial: React Component Lifecycle
Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...
- 使用 jest 测试 react component 的配置,踩坑。
首先安装依赖 npm i jest -g npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react ...
- 转载 React.createClass 对决 extends React.Component
先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...
- storm报错:Exception in thread "main" java.lang.RuntimeException: InvalidTopologyException(msg:Component: [mybolt] subscribes from non-existent stream: [default] of component [kafka_spout])
问题描述: storm版本:1.2.2,kafka版本:2.11. 在使用storm去消费kafka中的数据时,发生了如下错误. [root@node01 jars]# /opt/storm-1. ...
- 002-and design-dva.js 知识导图-01JavaScript 语言,React Component
一.概述 参看:https://github.com/dvajs/dva-knowledgemap react 或 dva 时会不会有这样的疑惑: es6 特性那么多,我需要全部学会吗? react ...
- React.Component 与 React.PureComponent(React之性能优化)
前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看 ...
随机推荐
- Swift 4.0:访问级别(访问控制)
基础篇 注: 下文中所提及的类和类型为Class, Enum和Struct Swift中的访问级别有以下五种: open: 公开权限, 最高的权限, 可以被其他模块访问, 继承及复写. public: ...
- 服务器搭建域控与SQL Server的AlwaysOn环境过程(一) 搭建域控服务器
0 准备阶段 1. Windows Server 服务器 3台(其中域控服务器配置可降低一个水准,目前博主试用的是:域控服务器--2核4G 数据库服务器(节点)--4核8G ) 2. SQL Serv ...
- 微信小程序微信支付的一些坑
使用的是Node.js作为后端 统一下单: appid:这里的appid是调起微信支付的appid mch_id:商户号,需要注意的是商户号要与appid对应 nonce_str:Math.rando ...
- BZOJ 3881 [COCI2015]Divljak (Trie图+Fail树+树链的并+树状数组维护dfs序)
题目大意: Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...
- Docker学习总结(8)——利用Docker开启持续交付之路
持续交付即Continuous Delivery,简称CD,随着DevOps的流行正越来越被传统企业所重视.持续交付讲求以短周期.小细粒度,自动化的方式频繁的交付软件,在这个过 程中要求开发.测试.用 ...
- Camera Calibration 相机标定:Opencv应用方法
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49427383 Opencv中Camer ...
- 杭电OJ(HDU)-ACMSteps-Chapter Two-《An Easy Task》《Buildings》《decimal system》《Vowel Counting》
http://acm.hdu.edu.cn/game/entry/problem/list.php?chapterid=1§ionid=2 1.2.5 #include<stdio.h> ...
- HDU-3577-Fast Arrangement-区间更新
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3577 好吧,我认为这道题有必要说一下题目意思:毕竟我刚開始是没有看太懂,原谅我这个英语渣渣...ORZ ...
- POJ 2528 Mayor's posters 离散化和线段树题解
本题就是要往墙上贴海报,问最后有多少可见的海报. 事实上本题的难点并非线段树,而是离散化. 由于数据非常大,直接按原始数据计算那么就会爆内存和时间的. 故此须要把数据离散化. 比方有海报1 6 7 ...
- hdoj--2098--分拆素数和(水题)
分拆素数和 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...