Как правильно вводить избыточно-thunk действия и mapDispatchToProps с redux 4.0.1, redux-thunk 2.3.0 и машинописным шрифтом 3.1.3

Question

Я обновляю зависимости в моем проекте (redux 4.0.1, redux-thunk 2.3.0, typcript 3.1.3), и мне очень трудно найти правильные типы для redux-thunk в обоих моихОбъявление действия как объявление mapDispatchToProps.

Например, у меня есть следующие действия:

Обычное действие с избыточностью

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 action

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>'.

Есть идеи?

Answer 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) {...}

После исправления я обнаружил, что мой тип действия приведения-редукциидолжно быть

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

вместо

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