useReducer的initialState键入为永不？

Question

initialState出现错误：类型为'{email：string; 密码：字符串；有效：布尔值；}'不可分配给'never'类型的参数。ts（2345）

function reducer(state: IState, action: IFluxAction) {
  const Users = UsersFetch()
  switch (action.type) {
    case 'email':
      const email = action.value
      const valid = Users.find(e => e === email) ? true : false

      return {
        email,
        valid,
      }
    case 'password':
      const password = action.value
      return {
        password,
      }
    default:
      throw new Error()
  }
}

  const initialState = {
    email: '',
    password: '',
    valid: false,
  }
  const [state, dispatch] = React.useReducer(reducer, initialState)

键入此错误以满足错误的正确方法是什么？

React 16.8.1 打字稿3.3.1

应该（通过固定） 添加...state到收益中，例如

  switch (action.type) {
    case 'email':
      const email = action.value
      const valid = Users.find(e => e === email) ? true : false

      return {
        ...state,
        email,
        valid,
      }
    case 'password':
      const password = action.value
      return {
        ...state,
        password,
      }
    default:
      throw new Error()
  }

此外，正如@madflanderz所建议的那样，将IState设置为减速器的预期返回值有助于解决此类问题。

Answer 1

我也为这个问题而苦苦挣扎。在我看来，预防错误的最佳方法似乎是将State Interface添加为reducer的返回类型。然后，您可以在化简器内看到类型错误，而不是在useReducer行上。

像这样：

function reducer(state: IState, action: IFluxAction): IState {
   // reducer code
   // type errors are visible here 
}

Answer 2

谢谢，疯狂弗兰德斯！

我遇到过同样的问题。就我而言，问题是我错过了输入减速器的返回值：

function reducer(state: IState, action: IFluxAction): IState /<- *Don't forget this!*/ {
   // reducer code
   // type errors are visible here 
}

Answer 3

该问题最有可能与您的减速器声明有关。该initialState的类型必须是相同的减速功能状态的类型和返回值。

这将起作用：

function reducer(state: {email: string}) {
  return state
}
const initialState = {
  email: '',
}
const [state, dispatch] = React.useReducer(reducer, initialState)

这将产生一个错误：

// state has a different type than initialState.
function reducer(state: {address: string}) {
  // No return statement.
}
const initialState = {
  email: '',
}
const [state, dispatch] = React.useReducer(reducer, initialState) // Error

在作出反应的类型，你可以看到的是，useReducer通用的函数总是期望initialState类型是一个的ReducerState<R>类型。该ReducerState<R>是一种有条件的类型，试图推断出正确的状态的类型和回退到never如果失败。