reactjs - combineReducers 不推断类型

标签 reactjs typescript redux

我正在使用 combineReducers在我的 React TypeScript 应用中:

// 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 推断它的类型。

然而,对我来说它没有,即使每个组合的 reducer 都有它的返回类型被识别: enter image description here enter image description here enter image description here

( ReturnType<typeof combidedReducer>unknown )

这里有什么问题?

这是我最大程度简化的 reducer :

// 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 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]>
}

然后是你的 reducer 组(在你组合它们之前)

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

export type State = InferRootState<typeof reducers>;

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

关于reactjs - combineReducers 不推断类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59768923/

相关文章:

javascript - 在 react 组件中每 1.5 秒更改/改组文本

javascript - 除非我刷新页面,否则我的 React UI 不会更新

unit-testing - 如何为 Typescript 类型编写负面测试?

javascript - 将非 ui 逻辑放在 react/redux 应用程序中的什么位置?

javascript - React-Router - 未捕获的类型错误 : Cannot read property 'route' of undefined

android - 无法使用 react-native 在 Android 上呈现具有绝对位置的 View

reactjs - redux-saga-test-plan put 效果不匹配,但实际和预期的有效载荷相等

typescript - 错误消息 : "An interface can only extend an object type or intersection of object types with statically known members"

javascript - Material-UI 中的 DefaultTheme 导致 `Invalid module name in augmentation` 错误

javascript - react : How to clear form only after SUCCESSFUL submit?