如何在Redux Toolkit（TypeScript环境）中设置preloadedState？

你的问题出在全局store变量初始为null，而AppState和AppDispatch直接依赖这个可能为null的变量推导类型，TypeScript会因为null没有getState/dispatch方法而报错。下面是两种实用的解决办法：

方案一：从函数返回值推导类型（推荐） #

完全避免全局store变量的类型依赖，直接从getStore函数的返回值推导所需类型，这也是Redux Toolkit的最佳实践：

import { configureStore } from '@reduxjs/toolkit';
import ContentSlice from './path-to-content-slice';

// 先定义根reducer（可选，但让结构更清晰）
const rootReducer = {
  content: ContentSlice
};

export default function getStore(incomingPreloadState?: any) {
  return configureStore({
    reducer: rootReducer,
    preloadedState: incomingPreloadState,
  });
}

// 从getStore的返回值推导Store类型
export type AppStore = ReturnType<typeof getStore>;
// 基于Store类型推导State和Dispatch类型
export type AppState = ReturnType<AppStore['getState']>;
export type AppDispatch = AppStore['dispatch'];

这种方式不需要全局store变量，类型推导完全基于函数的返回值，彻底解决null类型的问题，同时代码结构更干净。

方案二：保留全局变量但调整类型推导 #

如果必须保留全局store变量，不要直接用它推导类型，而是从getStore函数的返回值来推导：

import { configureStore } from '@reduxjs/toolkit';
import ContentSlice from './path-to-content-slice';

export let store: ReturnType<typeof getStore> | null = null;

export default function getStore(incomingPreloadState?: any) {
  store = configureStore({
    reducer: { 
      content: ContentSlice
    },
    preloadedState: incomingPreloadState,
  });
  return store;
}

// 从getStore的返回值推导类型，而非直接依赖可能为null的store变量
export type AppState = ReturnType<ReturnType<typeof getStore>['getState']>;
export type AppDispatch = ReturnType<typeof getStore>['dispatch'];

这种方式虽然保留了全局store，但类型推导不再依赖它的初始null状态，同样能解决类型错误。不过要注意：运行时如果在调用getStore前访问store，仍然会得到null，所以要确保getStore先被调用。

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