使用React Hooks + HMR保持MobX存储上下文

问题描述

我使用Webpack 4，Typescript（ts-loader）进行了简单的设置，并且将React v16.13与mobx5和mobx-react6一起使用。最近引起我注意的是，在热重装模块时-我立即丢失了所有存储在React.Context中的存储数据。

举个例子：

const providers = {
    userStore: new UserStore(),...
}
export const storeContext = createContext(providers);

//

//useStore.ts
import { useContext } from 'react';
import { storeContext } from './providers';

export const useStore = () => useContext(storeContext);

//

    // App.tsx
    const initUser = useCallback(async () => {
        try {
            await userStore.getUser();
        } catch {
        } finally {
            appStore.setAppLoaded();
        }
    },[appStore,userStore]);

    useEffect(() => {
        if (!appStore.token) {
            appStore.setAppLoaded();
            return;
        }

        initUser();
    },initUser]);

每当我更新组件或商店时-发生HMR后，我都会丢失状态，并且会发生这些用于加载网页的初始操作（根据在不同组件中使用的存储而不同的操作）。我在想这与钩子的依赖关系有关。是否有适当的方法在钩子中建立store依赖关系，以使“完整状态刷新”不会发生，或者我在这里漏了一点？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）