reactjs - 如何从打字稿 useReducer 挂钩安全地断言某个状态？

Question

假设我们有以下状态及其减速器动作

type User = {
    id: number
}

type LoginState = {
    user?: User,
    isLoggingIn: boolean,
    isLoggedIn: boolean,
    error?: Error
}

type LoginActions =
    | { type: 'START_LOGGING_IN' }
    | { type: 'SUCCESSFUL_LOG_IN', user: User }
    | { type: 'ERROR', error: Error }
    | { type: 'START_LOGGING_IN' }

如果我想从我的所有应用程序中使用这种状态，我肯定需要一些反应上下文解决方案。我不希望对这个问题使用任何外部依赖项。

然而，经过一些 fsharp 学习，这种方法导致不可能的状态成为可能。例如，isLoggedIn如果我们在 reducer 中出错，状态可能会出错。

解决方案是使 LoginState 成为可区分的联合类型，但就我测试了 useReducer 的打字稿类型而言，强制我拥有一个类型中的所有属性，就像在示例中一样。

那么，这个问题通常是如何解决的呢？我知道我描述的示例是标准方法，但是，每当使用登录状态时，我必须在每个地方处理用户不存在的情况，这是我不想要的。我想要这个问题的最安全的解决方案，所以也不要type assertions使用。

如果我的某些断言有误，请纠正我，我对前端的东西很困惑：S

谢谢！

标签： reactjstypescriptreact-hooks

Answer 1

最安全的方法是定义LoginState为只有有效 reducer 状态的可区分联合。这使您能够定义仅处理那些为其设计的联合组成类型的函数。

TS游乐场

LoginState尽管通常这很麻烦，而且大多数时候开发人员对您问题中定义的类型非常满意。