TypeScript 和 Redux:为什么我需要添加` |undefined` 到我的 Reducer 状态类型? [英] TypeScript and Redux: Why do I need to add ` | undefined` to my Reducer state type?

问题描述

为什么我不能像这样简单地输入我的 reducer，而不在我的 redux 状态类型中添加| undefined"?

Why can I not just type my reducer simply like this, without adding " | undefined" to my redux state type?

const reducer: Reducer<ReduxState> = function(state: ReduxState, action: any) ...

额外的上下文::::

Extra context::::

这工作正常:

export const reducer: Reducer<ReduxState | undefined> = function (
    state: ReduxState | undefined, 
    action: any
) {
    return state
}
export default reducer

但是，从 fxn 中取出状态参数undefined"时不会:

However, it doesnt when taking away state parameter "undefined" from fxn:

export const reducer: Reducer<ReduxState | undefined> = function (
    state: ReduxState, 
    action: any
) {
    return state
}
export default reducer

出现以下错误:

Type '(state: ReduxState, action: any) => ReduxState' is not assignable to type 'Reducer<ReduxState | undefined, AnyAction>'.
  Types of parameters 'state' and 'state' are incompatible.
    Type 'ReduxState | undefined' is not assignable to type 'ReduxState'.
      Type 'undefined' is not assignable to type 'ReduxState'.ts(2322)

或者这样:

export const reducer: Reducer<ReduxState> = function (
    state: ReduxState | undefined, 
    action: any
) {
    return state
}
export default reducer

它给出了一个错误消息:

which gives an error msg of:

Type '(state: ReduxState | undefined, action: any) => ReduxState | undefined' is not assignable to type 'Reducer<ReduxState, AnyAction>'.
  Type 'ReduxState | undefined' is not assignable to type 'ReduxState'.
    Type 'undefined' is not assignable to type 'ReduxState'.ts(2322)

最后，这也不起作用:

import {ReduxState, ReduxAction, ReduxActionType} from './types'
import {Reducer} from 'redux'

export const reducer: Reducer<ReduxState> = function (
    state: ReduxState, 
    action: any
) {
    return state
}
export default reducer

错误信息为:

Type '(state: ReduxState, action: any) =>ReduxState' 不可分配给类型 'Reducer'.参数state"和state"的类型不兼容.输入'ReduxState |undefined' 不可分配给类型 'ReduxState'.类型 'undefined' 不可分配给类型 'ReduxState'.ts(2322)

TL;DR:Typescript 对我的 Reducer 不满意，除非我在 Reducer 和 function(state: ReduxState | undefined) 中明确允许ReduxState | undefined"类型代码>.

TL; DR: Typescript isn't happy with my Reducer unless I specifically allow "ReduxState | undefined" type in both the Reducer<ReduxState|undefined> and function(state: ReduxState | undefined).

推荐答案

因为对于初始状态，之前的状态是未定义的.因此，您的函数必须能够处理 state 为 undefined 的情况，这就是第一个错误告诉您的.

Because for the initial state, the previous state is undefined. Therefore your function has to be able to deal with state being undefined, thats what the first error tells you.

第二个版本不起作用，因为您返回状态，并且可以未定义(因为您不检查它是否未定义)，因此该函数的返回类型(这是 Reducer 的通用参数)也必须是未定义的.你可以预防:

The second version doesn't work, because you return state, and that can be undefined (as you don't check if it is not defined), and therefore the return type of that function (which is the generic argument to Reducer) also have to be possible undefined. You could guard against that:

  if(state === undefined)
     return { /*...*/ };
  else return state;

然后 Reducer 将正确描述类型.

then Reducer<ReduxState> would describe the type correctly.

这篇关于TypeScript 和 Redux:为什么我需要添加` |undefined` 到我的 Reducer 状态类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！