README

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:

Creating new subjects

// 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:

(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.
(optional) The initial value for the subject.

Creating the application state stream

// 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.

Using newly create Store

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 (
            <header>
                <h1>Welcome Back</h1>
                <p>{user.userName}</p>
            </header>
        )
    }
}

Recipes

Use store value in fetch stream

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)
    })

Usage no npm install needed!