Skip to content

React state management powered by rxjs and react hooks.

Notifications You must be signed in to change notification settings

buhichan/rehooker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rehooker

State management powered by rxjs and react hooks.

API

  • createStore(defaultState, middleware?, reducer?)

    • create a store with these methods:
      • use()
        • a hook that subscribes the latest state.
      • stream
        • get the inner behavior subject of state.
      • value
        • value of inner behavior subject
      • next(Mutation):void
        • Mutation is (previousState)=>nextState
        • dispatch a mutation to change the current state.
  • useObservables

  • @deprecated @已废弃 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
  • @deprecated @已废弃 useObservable(ob:Observable<T>): T

    • a hook which get the value of an observable
  • @deprecated @已废弃 useSource(ob:Observable<T>, operator:(ob:Observable<T>)=>Observable<T> = x=>x, dependencies: any[])

    • a hook which do 3 things:
        1. apply the operator on an observable
        1. do shallow compare like react does
        1. get the value of an observable
    • dependencies is the underlying useEffect's second argument

Example

import {createStore, useSource, useSink} from "rehooker"
import * as React from "react"
import { from } from 'rxjs';
import { debounceTime, map, tap } from 'rxjs/operators';

const userStore = createStore({
    users: [] as any[]
})

const http = {
    get:(url)=>{
        return fetch(url).then(res=>res.json()).then(x=>x.DataSet)
    }
}

export function App(){
    const {users} = userStore.use() //this is a short hand for const {users} = useSource(userStore.stream,[]) || userStore.stream.value
    const getUser = useSink(subject=>subject.pipe( //click event is converted to rxjs subject
        tap((e)=>{
            console.log('button clicked, click event is: ', e)
        }),
        debounceTime(300), // click event is debounced
        switchMap(()=>from(http.get('/people/1/') as Promise<any[]>)),
    ).subscribe(v=>{
        userStore.next(oldState=>({
            ...oldState,
            users:v
        }))
    }),[])
    return <div>
        <button onClick={getUser}>debounced getUser</button>
        <pre>
            {JSON.stringify(users)}
        </pre>
    </div>
}

About

React state management powered by rxjs and react hooks.

Resources

Stars

Watchers

Forks

Packages

No packages published