我使用typescript的ReturnType功能找到了关于type-safety redux的很棒的解决方案，它是2.8版本的新功能 .

动作/ types.ts

type FunctionType = (...args: any[]) => any;
type ActionCreatorsMapObject = { [actionCreator: string]: FunctionType };

export type ActionUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;

车型/ user.ts

export interface User {
    id: number;
    username: string;
    name: string;
}

动作/ index.ts

import { User } from '../models/user';

interface Action<T extends string> {
    type: T;
}

interface ActionWithPayload<T extends string, P> extends Action<T> {
    payload: P;
}

export function createAction<T extends string>(type: T): Action<T>;
export function createAction<T extends string, P>(type: T, payload: P): ActionWithPayload<T, P>;
export function createAction<T extends string, P>(type: T, payload?: P) {
    return payload === undefined ? { type } : { type, payload };
}

export enum ActionTypes {
    SIMPLE_ACTION = 'SIMPLE_ACTION',
    ASYNC_ACTION = 'ASYNC_ACTION
}

export const Actions = {
    simpleAction: (value: string) => createAction(ActionTypes.SIMPLE_ACTION, value)
    asyncAction: () => {
        const token = localStorage.getItem('token');
        const request = axios.get('/', {
            headers: {
                'Authorization': token
            }
        });
        return createAction(ActionTypes.ASYNC_ACTION, request as AxiosPromise<User>);
    },
    anotherAction: (value: number) => blahblah...
};

export type Actions = ActionUnion<typeof Actions>;

在进入Reducer之前，我使用的是redux-promise软件包，它是redux的中间件来处理异步调度 . 简单地说，如果有效载荷是promise，则redux-promise将解析该promise并将有效载荷值更改为promise的结果 .

这是问题所在 . 我想在编写reducer代码时使用ActionUnion类型 . 但是打字稿并没有改变有效载荷 .

user_reducer.ts

import { User } from '../models/user';
import * as fromActions from '../actions';

interface UserState {
    loginUser: User | null;
    someValue: string;
}

const initialState: UserState = {
    loginUser: null,
    someValue: ''
};

export default (state: UserState = initialState, action: fromActions.Actions) => {
    switch (action.type) {
        case fromActions.ActionTypes.SIMPLE_ACTION: {
            // typescript knows that action.payload is string. It works well.
            const data = action.payload;
            ...
        }
        case fromActions.ActionTypes.ASYNC_ACTION: {
            // typescript knows that action.payload is still promise.
            // Therefore typescript said, action.payload.data is wrong.
            const username = action.payload.data.username;
            ...
        }
        ...
    }
};

这不是一个错误 . 这是显而易见的，因为我定义了action：fromActions.Action，因此打字稿认为"Oh, type of action parameter is ReturnValue of asyncAction function and it has promise object as payload value." .

我认为有两种解决方案 .

1.旧式

在2.8之前，我们通常定义每个ActionCreator的接口并将它们联合起来 .

export type Actions = ActionCreator1 | ActionCreator2 | ActionCreator3 | ...;

它可以解决中间件问题，但如果我更改动作创建函数's return value, then I must change matched interface manually. (That' s为什么新的ReturnValue功能很棒 . ）

2.重新定义操作类型

而不是使用，

export type Actions = ActionUnion<typeof Actions>;

让我们定义具有承诺作为有效载荷值的Action类型 . 让我们说ActionWithPromisePayload . 下面是伪代码 . 我不擅长打字稿 . （T_T）

// Let's define two new types.
type ActionWithPromisePayload<...>;
type ActionWithPromiseResolvedPayload<...>;

ActionWithPromisePayload用于检查操作对象的有效负载是否具有承诺 . ActionWithPromiseResolvedPayload用于重新定义动作类型，因为承诺由中间件解决 .

然后，使用条件类型重新定义类型操作，条件类型在2.8中也是新的 .

如果Action将promise对象作为有效负载，那么它的真实类型不是ActionValue，而是已解决的类型 . 下面是伪代码 .

export type Actions = 
    ActionUnion<typeof Actions> extends ActionWithPromisePayload<..> ? ActionWithPromiseResolvedPayload<..> : ActionUnion<typeof Actions>;

问题有点乱，但关键问题是， how can I define type of reducer's action parameter nicely and working well with middleware?

如果有更好的方法，那么不关心我的解决方案 . 谢谢 .

参考 . https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575

reactjs typescript redux redux-promise typescript2.8