plugnplay

A tiny module to use a dictionary of Observables as a Store for React

Disclaimer

The purpose here is not to provide an async middleware to a redux store with Observables, as redux-cycle-middleware and redux-observable do but to replace redux and its different slices (async middlewares, reducers and derived data) with Behavior Subjects. As this, we can express each variable of the store as a function of other variables, in a clean and async way.

This library only exposes a component Playground (a store Provider) and a render props component Plug.

Install

npm i react@16.7 react-dom@16.7 rxjs@6 @seracio/plugnplay

Basic usage

import{Plug,Playground}from'@seracio/plugnplay';importReactfrom'react';import{of,interval}from'rxjs';import{shareReplay,delay}from'rxjs/operators';// expose a dictionary of Observables (Behavior Subjects)conststore={hello$: of('hello').pipe(delay(250),shareReplay(1)),count$: interval(1000).pipe(shareReplay(1))};render(<Playgroundstore={store}><h1>My app</h1><Plugcombinator={(store)=>store.hello$}>{(val)=>(!!val ? <div>{val}</div> : <div>waiting...</div>)}</Plug><p>Here is a counter:</p><Plugcombinator={(store)=>store.count$}>{(val)=>(!!val ? <div>{val}</div> : <div>waiting...</div>)}</Plug></Playground>);

API

Playground

The Playground component is the equivalent of a redux Provider.

typePlaygroundProps={store: {[key: string]: Observable};children: JSX.Elements;};

Plug

typePlugProps={combinator: (store)=>Observable;defaultValue?: any;};

The combinator props is a function that takes the dictionary store as param and returns the unique Observable we want to listen to.
This Observable can be:

• an Observable defined in the store
• a combination of multiple Obserables from the store (thanks to RX operators)
• a brand new Observble, unlinked to the store

The value of this Observable will be emitted through a render props function. Typically, you want them to be formated like props, but nothing mandatory here:

<Plugcombinator={(store)=>combineLatest(store.count$,store.val$).pipe(map(([count,val])=>({ count, val })))}>{(props)=>(!!props ? <MyComp{...props}/> : <Waiting/>)}</Plug>

As Observables are asynchronous by nature, you must provide a defaultValue if you want a synchronous rendering:

<Plugcombinator={(store)=>store.props$}defaultValue={{count: 0,val: ''}}>{(props)=><MyComp{...props}/>}</Plug>

Or you can use a Waiting component, as defaultValue is defined as null by default:

<Plugcombinator={(store)=>store.props$}>{(props)=>(!!props ? <MyComp{...props}/> : <Waiting/>)}</Plug>

Development

yarn test --watch

Publish

Due to the namespace

npm publish --access=public