[Recompose] Stream a React Component from an Ajax Request with RxJS

2023年11月12日 129次阅读 来源: Zhentiw

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.

    原文作者：Zhentiw
    原文地址: https://www.cnblogs.com/Answer1215/p/8084062.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞