[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

Posted 2020-10-18 Answer1215

Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components.

 

Using componentFromStream:

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
  setObservableConfig,
  componentFromStream,
  createEventHandler,
  mapPropsStream
} from "recompose"

setObservableConfig(config)
//#endregion

const Counter = props => <h1>{props.count}</h1>

const CounterWithInterval = componentFromStream(
  props$ => props$.switchMap(
    props => Observable.interval(1000),
    (props, count) => ({count, ...props})
  )
  .map(Counter)
)


const App = () => (
  <div>
    <CounterWithInterval />
  </div>
)

render(<App />, document.getElementById("root"))

 

MapPropsStream allows you to create functions that will decorate your component, rather than creating a component itself. I‘m going to create an interval here using MapPropsStream.

A mapProposStream version can be like this:

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
  setObservableConfig,
  componentFromStream,
  createEventHandler,
  mapPropsStream
} from "recompose"

setObservableConfig(config)
//#endregion

const Counter = props => <h1>{props.count}</h1>

const interval = mapPropsStream(props$ => props$.switchMap(
  props => Observable.interval(1000),
  (props, count) => ({ count, ...props })
))

const CounterWithInterval = interval(Counter)


const App = () => (
  <div>
    <CounterWithInterval />
  </div>
)

render(<App />, document.getElementById("root"))

 

As you can see, we take the hightlighted part as own function, wrapped with ‘mapPropsStream‘.