TypeScript异步配置Redux Store时如何导出RootState类型

问题本质 #

你踩的坑本质上来自两个认知偏差：

1. TypeScript的类型导出必须声明在模块顶层，不能放在函数、异步回调、条件分支这类运行时代码块里。类型是编译阶段静态分析的产物，不会跟着运行时逻辑走，所以你在async函数里写export type报语法错是必然的，和Redux本身无关。
2. Redux Store的状态类型完全由rootReducer决定，preloadedState只是给部分状态传入初始值，根本不会改变状态的结构定义，完全不需要等拿到真实store实例再推导类型。

现有方案评价 #

你想到的「创建空配置虚拟store推导类型」的写法没有功能错误，类型推导结果也是准确的，但属于多做了无用功：

• 凭空多了一次store实例创建的运行时开销（虽然这个开销极小，且生产环境构建时大概率会被tree-shaking删掉，但完全可以避免）
• 推导路径绕了远路，存在更直接、更轻量的写法。

标准最佳实践 #

直接在模块顶层完成类型推导，不需要等任何异步逻辑，零额外运行时开销：

1. 推导RootState：直接取rootReducer的返回值类型，这是最准确、最源头的定义
2. 推导AppDispatch：如果不想手动拼接中间件带来的类型扩展，只需要写个仅用于类型推导的临时配置函数即可，不需要真的执行configureStore创建可用实例（就算执行了，因为没有被任何运行时代码引用，打包时会被自动移除）

完整实现代码：

// 顶层直接导出类型，和异步逻辑完全解耦
// 从根reducer直接推导状态类型，100%匹配真实store的state结构
export type RootState = ReturnType<typeof rootReducer>;

// 推导dispatch和store类型，这部分代码不会产生任何运行时代码
const _typeHelper = () => configureStore({ reducer: rootReducer });
export type AppDispatch = ReturnType<typeof _typeHelper>['dispatch'];
export type AppStore = ReturnType<typeof _typeHelper>;

const getPreloadedState = async (): Promise<Partial<RootState>> => {
  // 注意preloadedState只需要传部分状态即可，缺省字段会自动用reducer初始值填充
  // 不要标注为完整RootState，否则会强制你传所有reducer的初始值，不符合API设计逻辑
  const restoredSession = await Session.restore();
  return {
    session: {
      sessionKey: restoredSession.sessionKey,
      expiresIn: restoredSession.expiresIn
    }
  };
};

export const configureStoreAsync = async (): Promise<AppStore> => {
  const preloadedState = await getPreloadedState();
  const store = configureStore({
    reducer: rootReducer,
    preloadedState
  });
  return store;
};

补充说明 #

• 永远不要试图在异步回调、条件分支这类运行时代码块里导出类型，这违反TypeScript的静态类型设计规则。
• 所有和store配置相关的类型（state、dispatch、store本身）都不要依赖运行时的真实实例推导，从reducer、store配置函数这类静态定义上推导就足够准确。

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