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.

  • 相关阅读:
    window.clearInterval与window.setInterval的用法
    <a href=“#”>
    DIV+CSS 中的 overflow:hidden
    @media screen
    VS2010程序打包操作--超详细
    Easy CHM使用简明教程
    垃圾纸盒的叠法-超级实用
    IOS 3D UI --- CALayer的transform扩展
    CGContextAddArc
    CGPathAddArc
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8084062.html
Copyright © 2011-2022 走看看