如何使用 redux 4.0.1、redux-thunk 2.3.0 和 typescript 3.1.3 正确键入 redux-thunk 操作和 mapDispatchToProps答案

【问题标题】：How to correctly type redux-thunk actions & mapDispatchToProps with redux 4.0.1, redux-thunk 2.3.0 & typescript 3.1.3如何使用 redux 4.0.1、redux-thunk 2.3.0 和 typescript 3.1.3 正确键入 redux-thunk 操作和 mapDispatchToProps
【发布时间】：2019-03-23 06:05:09
【问题描述】：

我正在更新我的项目中的依赖项（redux 4.0.1、redux-thunk 2.3.0、typescript 3.1.3），我很难在我的两个项目中找到正确的 redux-thunk 类型动作声明作为我的 mapDispatchToProps 声明。

例如，我有以下操作：

正常的 redux 操作

export interface UpdateRowContent {
    type: typeof Actions.UPDATE_ROW_CONTENT;
    payload: React.ReactNode[];
}
export const updateRowContent: ActionCreator<Action> = (content: React.ReactNode[]) => {
    return { type: Actions.UPDATE_ROW_CONTENT, payload: content};
};

Redux-thunk 动作

export interface ToggleModalShown {
    type: typeof Actions.TOGGLE_MODAL_SHOWN;
    payload: {
        isShown: boolean;
        targetType: TargetType;
        packageItemId?: string;
    };
}
export function toggleModalShown(
    isShown: boolean,
    targetType: TargetType,
    packageItemId?: string,
): any {
    return (dispatch: Dispatch<any>) => {
        if (isShown) {
            dispatch(clearForm());
        } else if (packageItemId) {
            dispatch(fillForm(packageItemId));
        }
        dispatch({
            type: Actions.TOGGLE_MODAL_SHOWN,
            payload: {isShown: isShown, targetType: targetType, packageItemId: packageItemId ? packageItemId : null},
        });
    };
}

我的 mapDispatchToProps 如下：

type DispatchType = Dispatch<Action> | ThunkDispatch<IState, any, Action>;

function mapDispatchToProps(dispatch: DispatchType) {
    return {
        updateRowContent: (content: React.ReactNode[]) => {
            dispatch(updateRowContent(content));
        },
        toggleModalShown: (isShown: boolean, targetType: TargetType) => {
            dispatch(toggleModalShown(isShown, targetType));
        },
    };
}

我在网上找到的所有内容都告诉我将 mapDispatchToProps 输入为ThunkDispatch<S,E,A>，这是我目前正在尝试做的。指南告诉我将实际的 thunk-action 键入为ActionCreator<ThunkAction<R,S,E,A>>

当我尝试使用 ActionCreator<ThunkAction<void,IState,any,Action>> 而不是 any 作为我的 redux-thunk 的类型时，我收到错误 Argument of type 'ActionCreator<ThunkAction<void, GoState, any, Action<any>>>' is not assignable to parameter of type 'Action<any>'.

有什么想法吗？

【问题讨论】：

标签： typescript redux react-redux redux-thunk dispatch

【解决方案1】：

好吧，我在调度输入时犯了一个愚蠢的错误...

type DispatchType = Dispatch<Action> | ThunkDispatch<IState, any, Action>;
function mapDispatchToProps(dispatch: DispatchType) {...}

应该是

type DispatchType = Dispatch<Action> & ThunkDispatch<IState, any, Action>;
function mapDispatchToProps(dispatch: DispatchType) {...}

修复后我发现我的 redux-thunk 动作类型应该是

export function toggleModalShown(): ThunkAction<void, IState, any, Action> {...}

而不是

export function toggleModalShown(): ActionCreator<ThunkAction<void, IState, any, Action>> {...}

【讨论】：