基于rxjs并结合hook封装的全局状态管理

323 阅读1分钟

import { useState, useEffect, useMemo } from "react";
import { BehaviorSubject } from 'rxjs';
import Immutable from "seamless-immutable";

interface propsValue {
    [key: string]: any
}

const useRxjs = (initValue: propsValue = {}) => {
    let initState = Immutable(initValue)
    const [subjectState$, dispatch] = useMemo(() => {
        const subject$ = new BehaviorSubject(initState)
        const set = payload => {
            initState = initState.merge(payload)
            subject$.next(initState)
        }
        const setIn = (payload, data) => {
            if (typeof payload == "string") {
                payload = [payload];
            }
            initState = initState.setIn(payload, data);
            subject$.next(initState)
        }
        const callback = cb => {
            initState = cb(initState);
            subject$.next(initState)
        }
        const dispatch = { set, setIn, callback }
        return [subject$, dispatch]
    }, [])
    const [state, setState] = useState(initState)
    useEffect(() => {
        let state$ = subjectState$.subscribe((newState) => {
            setState(newState)
        })
        return () => state$.unsubscribe()
    }, [])
    return [state, dispatch]
}

export default useRxjs](url)](url)