TypeScript 和 Redux：為什么要加`| undefined` 到我的 Reducer state 類型？

Question

為什么我不能像這樣簡單地輸入我的 reducer，而不在我的 redux state 類型中添加“ | undefined”？

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

額外的上下文::::

這工作正常：

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

但是，當從 fxn 中刪除 state 參數“undefined”時，它不會：

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

它給出了一個錯誤消息：

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' is not assignable to type 'Reducer<ReduxState, 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)

TL; DR：Typescript 對我的 Reducer 不滿意，除非我在Reducer<ReduxState|undefined>和function(state: ReduxState | undefined)中特別允許“ReduxState | undefined”類型。

Answer 1

因為對於初始狀態，先前的狀態是不確定的。 因此，您的函數必須能夠處理undefined state ，這就是第一個錯誤告訴您的內容。

第二個版本不起作用，因為您return state ，並且它可以是未定義的（因為您不檢查是否未定義），因此該函數的返回類型（這是Reducer的通用參數）必須可能未定義。 您可以避免這種情況：

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

然后Reducer<ReduxState>將正確描述類型。

Answer 2

也許你應該給你的 state 一個默認值，比如

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

const defaultState = {
    // your default state
}

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