zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Oracle中对多行查询结果进行拼接
    DX使用随笔--NavBarControl
    DX使用随记--其他
    DX使用随记--GroupControl
    DX使用随记--ImageComboBoxEdit
    DX使用随记--TabControl
    Oracle相关
    DX使用随记--GridControl
    一个NPOI导出到excel文件的范例记录
    python数据类
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8084062.html
Copyright © 2011-2022 走看看