combineReducers 不推断类型答案

【问题标题】：combineReducers doesn't infer typecombineReducers 不推断类型
【发布时间】：2020-05-03 06:05:15
【问题描述】：

我在我的 React TypeScript 应用程序中使用 combineReducers：

// combinedReducer.ts
import { combineReducers } from 'redux'
import reducer1 from './reducer1'
import reducer2 from './reducer2'

const combinedReducer = combineReducers({
    reducer1,
    reducer2,
})

export default combinedReducer

我从redux documentation 了解到combineReducers 应该根据组合减速器推断它的类型。

然而，对我来说它没有，即使每个组合的 reducer 都有它的返回类型被识别：

（ReturnType<typeof combidedReducer> 是 unknown）

这里出了什么问题？

这是我最大程度简化的减速器：

// reducer1.ts
const initialState: boolean = false

const reducer1 = (state = initialState): boolean => state

export default reducer1

// reducer2.ts
const initialState: boolean = false

const reducer2 = (state = initialState): boolean => state

export default reducer2

【问题讨论】：

这不是 Redux 的问题。那是您的 IDE/编辑器。从技术上讲， combineReducer 可以返回任何东西，因此它的返回值没有具体类型。您使用的任何编辑器都在查看该签名并尝试对其进行解释。看到 combineReducers 没有返回特定类型，它会向您报告它是“未知的”。我认为这与 Redux 无关。基于配色方案，看起来像 IntelliJ？是的，我也遇到了问题，所以我对所有前端的东西都使用 VSCode，它似乎更好地处理它
好吧，看看 redux 文档：redux.js.org/recipes/usage-with-typescript/… 他们像我一样使用createReducer，但他们得到的返回类型为RootState = ReturnType<typeof rootReducer>。当我这样做时，我得到<unknown>。这不仅仅是 IDE，我无法运行我的代码，因为 tslint 正在抱怨。 AFAIK IDE 也从那里获取信息。
据我所知combineReducers 收集了多个reducer 函数名称与它们打算修改的全局商店属性相同

标签： reactjs typescript redux

【解决方案1】：

我使用 redux 4.0.5 和 typescript 4.0.1 时遇到同样的问题。不得不自己写一个推断器：

type BaseReducerMap<S> = {
    [K in keyof S]: (state: S[K], action: any) => S
}

export type InferRootState<ReducerMap extends BaseReducerMap<S>, S = any> = {
    [K in keyof ReducerMap]: ReturnType<ReducerMap[K]>
}

然后为您的一组减速器（在组合它们之前）

const reducers = {
    login: loginReducer,
    chatUsers: chatUsersReducer,
};
const combinedReducer = combineReducers(reducers);

export type State = InferRootState<typeof reducers>;

那么typescript就可以成功推断出我的State的类型了。我不知道为什么在这个版本中失败了。

【讨论】：

哇，谢谢！那是一些严肃的打字稿。非常适合我。

【解决方案2】：

确保 Redux 为 4.0.0 或更高版本。 combineReducers 的类型映射随版本 4.0.0 一起发布，here's the related PR on the redux github。

您可以更新您的 package.json 文件：

...
"dependencies": {
   "redux": "^4.0.3"
}
...

然后运行 npm install 以更新到最新版本。

完成此更改后，请确保重新启动 IDE 以重新加载类型映射。

【讨论】：