# 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:
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.

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