[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 说起,从函数名字我们就能看 ...
随机推荐
- lftp简单使用
连接服务器: lftp -e "参数;" "username":"password"@"ip" -p port lftp ...
- 《Unix环境高级编程》读书笔记 第8章-进程控制
1. 进程标识 进程ID标识符是唯一.可复用的.大多数Unix系统实现延迟复用算法,使得赋予新建进程的ID不同于最近终止所使用的ID ID为0的进程通常是调度进程,也常被称为交换进程.它是内核的一部分 ...
- P2421 [NOI2002]荒岛野人 扩展欧几里得 枚举
Code: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...
- jquery validate验证remote时的多状态问题
因为远程验证用户名时可能会出现几种错误情况: 1.用户名字符非法: 2.长度超限: 3.用户名已经存在: 但remote返回的内容只能是布尔型的,即使用dataFilter来过滤也不知道如何对应的把错 ...
- 洛谷—— P2896 [USACO08FEB]一起吃饭Eating Together
https://www.luogu.org/problem/show?pid=2896 题目描述 The cows are so very silly about their dinner partn ...
- @SpringBootApplication cannot be resolved to a type In STS
@SpringBootApplication cannot be resolved to a type In STS 学习了:https://stackoverflow.com/questions/4 ...
- hdu 4841 圆桌问题(用vector模拟约瑟夫环)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4841 圆桌问题 Time Limit: 3000/1000 MS (Java/Others) M ...
- new 对象和Class的getInstance()方法的差别?
创建对象时的差别 1.new 对象包含2步, 1)载入类: 2)而且实例化. 2.Class的对象.getInstance(),只不过实例化. 也就是说.在运行 Class的对象.getInstanc ...
- ,典型递归问题-F(1025)mod 5 的值
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- angularjs 模块化
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...