Flow - 类型安全的动作

Question

我正在使用 flow 并且我想让我的 reducer 更安全。我遇到了这个评论，它提出了一个我觉得很好并且适合我的代码库的解决方案： https://github.com/reduxjs/redux/issues/992#issuecomment-191152574

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

我的代码：

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
(...)

我做错了吗？是否有可能让这个打字稿解决方案流畅运行？还是我应该使用不同的方法？如果是，您有什么建议？

Answer 1

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

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

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

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

Answer 2

如果您构建的泛型类型具有一个类型字符串引用与有效负载类型链接，则可以使用切换案例。我不知道是否可以像您使用的方式那样使用案例，因为在 case 而不是 booleans 中测试 strings 的条件几乎是它们自己的。

以下解决方案利用类型细化，因此根据您编写的条件 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,
        a: action.payload.a, // <-- it fails because type refines to PayloadB
        b: action.payload.b,
      };
    }
    default:
      return state;
  }
};