React Global State - 寻找建议

74 阅读1分钟

你好,社区

我终于厌倦了使用Context API和其他库,决定自己想办法来控制我的Web应用程序的全局状态。

这是我现在所拥有的,似乎工作得很好。
我希望我能得到一些反馈或建议,了解使用这种实现的问题所在。

谢谢大家

import { useState, Dispatch, SetStateAction, useEffect, useId } from "react";

type Setter<T> = Dispatch<SetStateAction<T>> | ((value: T) => void)

/**
 * Create a pod with default value
 * @param value 
 * @returns usePod, value, updater
 */
export function createPod<T>(value: T) {
    const pod = {
        value: value
    };

    const setters: { [key in string]: Setter<T> } = {};

    const updater = (value: T) => {
        pod.value = value;
        for (let key in setters) {
            if (!setters.hasOwnProperty(key)) return;
            setters[key](value);
        }
    }

    const usePod = () => {
        const [value, setValue] = useState(pod.value);
        const key = useId()
        useEffect(() => {
            setters[key] = setValue;
            return () => {
                delete setters[key];
            }
        }, [])

        return [value, updater] as const
    }
    return [usePod, pod.value, updater] as const;
}