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的更多相关文章

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

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

  2. 学习React系列(一)——React.Component 生命周期

    挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...

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

  4. React.js Tutorial: React Component Lifecycle

    Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of ...

  5. 使用 jest 测试 react component 的配置,踩坑。

    首先安装依赖 npm i jest -g npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react ...

  6. 转载 React.createClass 对决 extends React.Component

    先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...

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

  8. 002-and design-dva.js 知识导图-01JavaScript 语言,React Component

    一.概述 参看:https://github.com/dvajs/dva-knowledgemap react 或 dva 时会不会有这样的疑惑: es6 特性那么多,我需要全部学会吗? react ...

  9. React.Component 与 React.PureComponent(React之性能优化)

    前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看 ...

随机推荐

  1. 重设数据文件大小sql语句

    set verify off column file_name format a50 word_wrapped column smallest format 999,990 heading " ...

  2. 快速傅里叶变换(Fast-Fourier Transform,FFT)

    数学定义: (详细参考:https://www.baidu.com/link?url=oYAuG2o-pia_U3DlF5n_MJZyE5YKfaVRUHTTDbM1FwM_kDTjGCxKpw_Pb ...

  3. Vue this.$router.push、replace、go的区别

    1.this.$router.push 描述:跳转到不同的url,但这个方法会向history添加一个记录,点击后会返回到上一个页面 用法 //字符串 this.$router.push('home' ...

  4. HDU-1257 最少拦截系统 贪心/DP 最长上升子序列的长度==最长不上升子序列的个数?

    题目链接:https://cn.vjudge.net/problem/HDU-1257 题意 中文题咯中文题咯 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然 ...

  5. Vim配置及使用

    Vim配置 1.打开~/.vimrc,将以下内容考入文件.vimrc中 "行号" set nu "高亮" syntax enable syntax on &qu ...

  6. 【转】Geometry cannot have Z values

    http://blog.csdn.net/tweeenty/article/details/44246407 在对矢量要素类添加要素,进行赋几何信息时(FeatureBuffer.Shape = IG ...

  7. CAS-ERR Cannot create a session after the response has been committed

    现象: 当cas 登录人数较少时候没有错误,但是用户过多时候出现下列err May-2016 18:09:11.932 SEVERE [http-nio-8080-exec-52] org.apach ...

  8. IOS音频架构之Audio Unit

    在前面的章节部分我们已经对IOS音频结构有了一个清晰的认识,知道Audio Unit是位于整个音频结构的最底层,这一层非常多API已经開始和硬件打交道了.所以比較复杂,有了前面的基础再来看这个部分就比 ...

  9. Leetcode:Singel Number

    问题描写叙述: Given an array of integers, every element appears twice except for one. Find that single one ...

  10. springboot shiro配置

    导入相关包(这里配合使用Ehcache缓存) <dependency> <groupId>org.apache.shiro</groupId> <artifa ...