使用rootReducer后Store.getState()返回any类型，如何获取combinedReducers类型？

要让Store.getState()正确获取combinedReducers的类型，核心是明确约束rootReducer的输入输出类型，并给store指定正确的状态泛型，具体步骤如下：

1. 定义全局状态类型 #

从combinedReducers自动推导整个应用的状态类型，避免手动维护重复代码：

import { combineReducers, Reducer } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';
import reducer3 from './reducer3';
import { RESET_STORE } from './actionTypes';

const combinedReducers = combineReducers({
    reducer1,
    reducer2,
    reducer3
});

// 自动推导全局State类型
export type RootState = ReturnType<typeof combinedReducers>;

2. 修正rootReducer的类型注解 #

给rootReducer明确标注输入输出的类型，替代原来错误的ReturnType<typeof reducer>：

const rootReducer: Reducer<RootState> = (state, action) => {
    if (action.type === RESET_STORE) {
        // 传入undefined触发所有reducer返回初始状态
        return combinedReducers(undefined, action);
    }
    return combinedReducers(state, action);
};

export default rootReducer;

3. 给store指定状态泛型 #

创建store时通过泛型参数约束状态类型，让getState()返回正确的RootState：

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer, { RootState } from './rootReducer';

declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// 指定RootState泛型，让store.getState()的返回值类型明确
const store = createStore<RootState>(
    rootReducer,
    composeEnhancer(applyMiddleware(thunk))
);

// 可选：导出store类型，方便后续类型复用
export type AppStore = typeof store;

export default store;

效果验证 #

完成上述修改后：

• 直接调用store.getState().reducer1时，TypeScript会自动提示reducer1的属性，且能进行类型检查
• 组件中使用useSelector时，可通过RootState约束状态参数：

  import { useSelector } from 'react-redux';
  import { RootState } from './rootReducer';
  
  const MyComponent = () => {
      const data = useSelector((state: RootState) => state.reducer1.someProperty);
      return <div>{data}</div>;
  };
  

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