React Redux+TypeScript下如何正确初始化Redux全局store的preloadedState

问题场景 #

在React Redux + TypeScript项目配置store时，尝试给preloadedState设置初始全局数据结构后，出现类型错误。

原store配置代码 #

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../reducer/combineReducer';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';

const logger = createLogger(); 
const initialState = {
    
};

const store = configureStore({
    reducer: rootReducer,
    middleware: [logger, thunk],
    devTools: process.env.NODE_ENV !== 'production',
    preloadedState: initialState
});

export default store;

修改后的initialState #

const initialState = {
    user: {}
};

抛出的类型错误 #

Type '{ user: {}; }' is not assignable to type '{ readonly [$CombinedState]?: undefined; user?: { user: any; loginUser: {}; } | { loginUser: any; user: {}; } | undefined; }'.
  Types of property 'user' are incompatible.
    Type '{}' is not assignable to type '{ user: any; loginUser: {}; } | { loginUser: any; user: {}; } | undefined'.ts(2322)
configureStore.d.ts(45, 5): The expected type comes from property 'preloadedState' which is declared here on type 'ConfigureStoreOptions<CombinedState<{ user: { user: any; loginUser: {}; } | { loginUser: any; user: {}; }; }>, any, Middleware<{}, any, Dispatch<AnyAction>>[], [...]>'
(property) ConfigureStoreOptions<CombinedState<{ user: { user: any; loginUser: {}; } | { loginUser: any; user: {}; }; }>, any, Middleware<{}, any, Dispatch<AnyAction>>[], [...]>.preloadedState?: {
    readonly [$CombinedState]?: undefined;
    user?: {
        user: any;
        loginUser: {};
    } | {
        loginUser: any;
        user: {};
    } | undefined;
} | undefined

解决方案 #

错误核心是你定义的initialState中user字段结构，和rootReducer里user reducer的初始状态类型不匹配。从错误信息能看出，user reducer的初始状态要求包含user和loginUser两个子字段，而你只给了空对象{}，导致类型不兼容。

1. 对齐reducer的初始状态结构 #

找到你的user reducer文件，查看它的初始状态定义。比如如果user reducer的初始状态是：

// userReducer.ts
const initialUserState = {
  user: {},
  loginUser: {}
};

const userReducer = (state = initialUserState, action) => {
  // reducer逻辑
};

export default userReducer;

那全局的initialState就要对应这个结构：

const initialState = {
  user: {
    user: {},
    loginUser: {}
  }
};

2. 定义明确的TypeScript类型（推荐） #

为user状态定义统一的接口，确保全局和reducer的类型完全一致，避免后续类型错误：

// 定义user状态的接口
interface UserState {
  user: Record<string, any>; // 可替换成更具体的User类型，比如interface User { id: number; name: string; }
  loginUser: Record<string, any>;
}

// 在user reducer中使用该接口
const initialUserState: UserState = {
  user: {},
  loginUser: {}
};

const userReducer = (state: UserState = initialUserState, action) => {
  // reducer逻辑
};

// 全局initialState也使用这个类型
const initialState: { user: UserState } = {
  user: initialUserState
};

3. 省略preloadedState（可选） #

如果你不需要额外的预加载数据，Redux Toolkit会自动从各个reducer的初始状态组合出全局状态，直接省略preloadedState配置即可：

const store = configureStore({
  reducer: rootReducer,
  middleware: [logger, thunk],
  devTools: process.env.NODE_ENV !== 'production'
  // 去掉preloadedState，自动使用reducer的初始状态
});

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