把 umi 的 useModel 抽离到其他项目中使用

在 Umi 中，useModel 是用于连接组件和全局状态的 Hook。如果你想将这个逻辑抽离到其他项目中使用，你需要提取相关的逻辑并在新项目中重新实现它。

由于 useModel 是基于 Umi 的 provider 和 consumer 模式实现的，抽离这部分逻辑需要重新实现类似的上下文提供和消费机制。

以下是一个简化版本的 useModel 抽离示例：

import { useContext, useMemo } from 'react';
 
// 假设我们有一个自定义的上下文
const ModelContext = React.createContext();
 
// 提供全局状态的 Provider 组件
export const ModelProvider = ({ children, value }) => (
  <ModelContext.Provider value={value}>
    {children}
  </ModelContext.Provider>
);
 
// 创建模型的函数，可以在使用 useModel 的地方调用
export const createModel = (initialState, reducers) => {
  const [state, dispatch] = useReducer(reducers, initialState);
  const model = useMemo(() => ({
    ...state,
    ...reducers,
  }), [state]);
  return model;
};
 
// 使用 useModel 的 Hook
export const useModel = (model) => {
  const value = useContext(ModelContext);
  const modelInstance = value[model];
  return modelInstance;
};

在新的项目中，你需要在顶层组件上包裹一个 ModelProvider，并使用 createModel 创建模型，然后在组件中使用 useModel 来访问这些模型。

请注意，这个示例只是一个基本的指导框架，实际的实现可能需要考虑更多的边界情况和复杂性。