gpt4 book ai didi

typescript - 如何使用 redux 4.0.1、redux-thunk 2.3.0 和 typescript 3.1.3 正确键入 redux-thunk actions 和 mapDispatchToProps

转载 作者:搜寻专家 更新时间:2023-10-30 21:47:10 29 4
gpt4 key购买 nike

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

例如,我有以下操作:

正常的 redux Action

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

有什么想法吗?

最佳答案

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

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 Action 类型应该是

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

代替

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

关于typescript - 如何使用 redux 4.0.1、redux-thunk 2.3.0 和 typescript 3.1.3 正确键入 redux-thunk actions 和 mapDispatchToProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52873863/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com