Flow - 类型安全操作

如何解决Flow - 类型安全操作

我正在使用流，我想让我的减速器更安全。我遇到了这条评论，它提出了一个解决方案，我发现它在我的代码库中很合适： https://github.com/reduxjs/redux/issues/992#issuecomment-191152574

我正在尝试使用 %checks 关键字将其移植到 flow，但它不起作用。

我的代码：

export type Action<T> = {
  type: string,payload: T,};

interface ActionCreator<P> {
  type: string;
  (payload: P): Action<P>;
}

export function actionCreator<P>(type: string): ActionCreator<P> {
  return Object.assign((payload: P) => ({ type,payload }),{ type });
}

export function isActionOfType<P>(
  action: Action<any>,creator: ActionCreator<P>
): boolean %checks {
  return action.type === creator.type;
}

每当我像这样在 reducer 函数中使用它

(...)
case isActionOfType(action,getArticles):
  // action.payload is still any
(...)

我做错了吗？是否可以让这个打字稿解决方案在流程中工作？或者我应该使用不同的方法？如果是，那么您有什么建议？

解决方法

在 TypeScript 中，您不会使用 case 语句，而是使用 if 语句。

没有规定必须在 Redux 中使用 case 语句，实际上我们不再鼓励在 TypeScript 中使用这种模式，而是支持带有类型保护的 if 语句。

所以我想你可以试试。很抱歉，我无法在流程方面真正帮助您，我只能就我们如何为 TypeScript 推荐现代模式提供一般性建议，并希望这些建议能反映在流程中。

通常，您还可以查看官方 Redux Toolkit，它带来了所有这些抽象。它只是部分流类型，但这些类型可能已经满足您的需求，或者您甚至可以改进它们。

,

如果您构建的类型泛型具有与有效负载类型链接的一个类型字符串引用，则可以使用 switch case。我不知道像你这样使用 case 是否会起作用，因为 switch case 几乎是它们自己的 if 条件来测试 string 中的 case 而不是 boolean 。

以下解决方案利用了类型细化，因此基于您编写的条件 JS 流程将推断有效负载结构。这里需要注意的是，在您的 action 参数中，您必须添加所有可能的类型有效负载，否则流不知道可以改进哪些结构，这可以在其他地方分解，但这也有助于锁定变化在您不想处理的情况下，在您的减速器中。

try-flow

type AppT = {}

type ActionT<T,P> = {|
  type: T,payload: P,|};

type PayloadA = {| a: string |};
type PayloadB = {| b: string |};

const initialState = {};

const reducer = (
  state: AppT = initialState,action: ActionT<'ACTION_A',PayloadA> | ActionT<'ACTION_B',PayloadB>,): AppT => {
  switch (action.type) {
    case 'ACTION_A': {
      return {
        ...state,a: action.payload.a,};
    }
    case 'ACTION_B': {
      return {
        ...state,// <-- it fails because type refines to PayloadB
        b: action.payload.b,};
    }
    default:
      return state;
  }
};