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.

  • 相关阅读:
    [BJDCTF 2nd]fake google
    flask之ssti模板注入初窥
    ctfshow-web14
    ctfshow-web 13
    ctfshow-web12
    ctfshow-web 11
    ctfshow-web10
    ctfshow-web9
    python学习笔记(四)- 常用的字符串的方法
    python学习笔记(三)- 字典、集合
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8084062.html
Copyright © 2011-2022 走看看