rehooker
v0.0.9
Published
React state management powered by rxjs and react hooks.
Downloads
12
Readme
Rehooker
State management powered by rxjs and react hooks.
API
createStore(defaultState)
- create a store with these methods:
getState()
- get current state.
stream
- get the rxjs observable of state.
next(Mutation):void
- Mutation is (previousState)=>nextState
- dispatch a mutation to change the current state.
- create a store with these methods:
useSink(operation:(sub:Subject<T>), dependencies: any[]): (value:T)=>void
- a hook that creates a event handler which calls the underlying rxjs Subject's next()
dependencies
is the underlying useEffect's second argument
useObservable(ob:Observable<T>): T
- a hook which get the value of an observable
useSource(ob:Observable<T>, operator:(ob:Observable<T>)=>Observable<T> = x=>x, dependencies: any[])
- a hook which do 3 things:
- apply the operator on an observable
- do shallow compare like react does
- get the value of an observable
dependencies
is the underlying useEffect's second argument
- a hook which do 3 things:
Example
import {createStore, get, useSubject} from "guguder"
import * as React from "react"
import { Http } from './service/http';
import { from } from 'rxjs';
import { debounceTime, map, tap } from 'rxjs/operators';
const peopleStore = createStore([] as any[])
const http = Http("https://swapi.co/api",{
headers:{
'content-type':"application/json"
}
},res=>res.json())
const getPeople = ()=>useSubject(
v=>v.pipe(
tap((e)=>{
console.log(e)
}),
debounceTime(300),
map(()=>from(http.get('/people/1/') as Promise<any[]>)),
).subscribe(v=>{
peopleStore.dispatch(v.pipe(map(v=>()=>v)))
})
)
export function App(){
const people = get(peopleStore.stream)
return <div>
<button onClick={getPeople()}>getPeople</button>
<pre>
{JSON.stringify(people)}
</pre>
</div>
}