Flow 与 TypeScript 动作创建者（Redux）答案

【问题标题】：Flow vs TypeScript action creator (Redux)Flow 与 TypeScript 动作创建者（Redux）
【发布时间】：2018-10-31 03:55:48
【问题描述】：

我正在尝试弄清楚如何使用 Flow 为 Redux 实现类型注释。

使用 TypeScript：

const PLAY = 'PLAY';
const RUN = 'RUN';

class PlayAction {
    readonly type = PLAY;
    constructor(public payload: string) {}
}

class RunAction {
    readonly type = RUN;
    constructor(public payload: boolean) {}
}

type Actions = PlayAction | RunAction;

function dummyReducer(state: any, action: Actions) {
    switch(action.type) {
        case PLAY: {
            const typeTest = action.payload; // type: string 
            break;
        }
        case RUN: {
            const typetest = action.payload; // type: boolean
            break;
        }
    }
}

在流程文档中，我找到了这个例子：Redux with Flow。

// @flow
type State = { +value: boolean };

type FooAction = { type: "FOO", foo: boolean };
type BarAction = { type: "BAR", bar: boolean };

type Action = FooAction | BarAction;

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "FOO": return { ...state, value: action.foo };
    case "BAR": return { ...state, value: action.bar };
    default:
      (action: empty);
      return state;
  }
}

Flow 方法的大问题：

1) 在 2 处使用字符串，因此对于错过拼写错误是不好的做法。

2) 每次我想更改动作类型值时，都无法在 2 个地方更改字符串。

如何使用 Flow 解决这个问题？有什么想法吗？

【问题讨论】：

第一个示例中定义的.type 成员在哪里？
还是不明白你的问题吗？
readonly PLAY = PLAY; 真的吗？
@LidorAvitan 您的第一个示例（打字稿）无法编译：type 成员未在任何地方声明。

标签： javascript typescript redux flowtype

【解决方案1】：

我找到了一些答案，但效果不太好，再一次，您不能与集体诉讼创建者合作。：/

type _ExtractReturn<B, F: (...args: any[]) => B> = B;
export type ExtractReturn<F> = _ExtractReturn<*, F>;

动作文件 //

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';
const setName = (name: string) => {
    return {type: SET_NAME, payload: name}
}

const setAge = (age: number) => {
    return {type: SET_AGE, payload: age}
}
export type Actions =
    ExtractReturn<typeof setName> |
    ExtractReturn<typeof setAge>

图片来源：Shane Osbourne

Redux & Flow-type

【讨论】：