React中替代依赖注入实现代码解耦及业务层扩展方案咨询

问题背景 #

我正在学习React，目前开发的笔记应用将笔记存储在用户本地文件系统中，但未来计划支持云端存储，因此代码需要具备易替换性——当前的save()方法代表“保存到文件”，后续要能无缝切换为“保存到云端”。

现有思路与实现 #

我具备OOP背景，想到的解决方案是：

• 定义包含loadNote()和saveNote()方法的IStorageService接口；
• 针对文件系统和REST API分别实现该接口。

由于React没有类似Angular的依赖注入机制，我采用Context API结合Provider组件实现，代码如下：

export function DataStorageProvider({ children }: Props) {
    const [storageReady, setStorageReady] = useState<boolean>(false);

    const [fileSystemStorage] = useState<IStorageService>(new FileSystemStorage());

    useEffect(() => {
        fileSystemStorage.registerOnChangeCallback((newState) => {
            setStorageReady(newState);
        });

        return () => {
            fileSystemStorage.registerOnChangeCallback(() => { });
        };
    }, [fileSystemStorage]);

    return (
        <DataStorageContext.Provider
            value={{
                storageReady,
                fileSystemStorage
            }}
        >
            {children}
        </DataStorageContext.Provider>
    );
}

之后我用<DataStorageProvider>包裹App，并通过useContext在组件中获取存储服务，调用dataStorage?.fileSystemStorage.doSth()执行笔记操作。

当前疑问 #

现在我需要实现另一层业务逻辑：根据笔记用途在保存前进行处理，因此需要创建依赖IStorageService的ArchivedNoteHandler和ActiveNoteHandler类。

请问正确的实现方式是什么？我考虑过在DataStorageProvider中添加更多状态并传入IStorageService，代码示例如下：

export function DataStorageProvider({ children }: Props) {
    const [storageReady, setStorageReady] = useState<boolean>(false);

    const [fileSystemStorage] = useState<IStorageService>(new FileSystemStorage());
    const [archivedNoteHandler] = useState<IArchivedNoteHandler>(new ArchivedNoteHandler(fileSystemStorage));
    const [activeNoteHandler] = useState<IActiveNoteHandler>(new ActiveNoteHandler(fileSystemStorage));
    [...]

这种方式是否正确？我对此存疑，因为所有服务都是独立状态，若fileSystemStorage发生变化，其他类不会自动更新，是否需要用useEffect重新创建它们？

内容的提问来源于stack exchange，提问作者Piotrek