app-state-stream

Install

``npm install --save app-state-stream`

Usage

app-state-stream uses rxjs subjects merged in to a larger stream to share information between different subsribers. To start if you need to create a new subject:

$3

`
// src/store/user.js
import { createNewSubject } from "app-state-stream"

export const {
user$,
setUser
} = createNewSubject("user")

`

This will give us a new stream which we can pass new values to using the provided updater function which ensures the updates are isolated to desired stream. The createNewSubject function takes two arguments:
1) (required) name of the subject you're creating, this must be a valid variable name as it will be used to create the exported variable with an appended $ to domate that it's a stream.
2) (optional) The initial value for the subject.

$3

`
// src/store.js

import { createStateStream } from "app-state-stream"
import { user$ } from "./store/user"

export const store$ = createStateStream(
user$,
)
`

To create your state-stream you need to pass all the subjects you've created in to the createStateStream function and export the result to use as your store.

$3

`
import React, { Component } from "react"
import { store$ } from "./store"

export class App extends Component {
constructor(props) {
super(props)
this.state = {
user: {},
}
}

componentDidMount() {
this.store = store$.subscribe(({ user }) => {
this.setState({
user,
})
})
}

componentWillUnmount() {
this.store.unsubscribe() // you must unsubscribe to the store on componentWillUnmount to avoid leaks.
}

render() {
const { user } = this.state
return (


Welcome Back

{user.userName}


)
}
}
`

Recipes

$3

`
import { from } from "rxjs"
import { flatMap, take, map, switchMap } from "rxjs/operators"
import { createNewSubject } from "app-state-stream"
import { store$ } from "./store"

export const {
image$,
setImage
} = createNewSubject("image", "https//www.fake-cat-api.com/image/random")

const imgageStream$ = (catImageNo) => from(fetch(https//www.fake-cat-api.com/image/${catImageNo}))

export const getCat = () => store$.pipe(
map(({ catImageNo }) => catImageNo),
take(1),
switchMap(catImageNo => imgageStream$(catImageNo)),
flatMap(x => x.json()),
).subscribe(({ message }) => {
setImage(message)
})
``