npm install --save app-state-stream
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:
// 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.
// 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.
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>
)
}
}
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)
})