typescript - 如何使用 redux 4.0.1、redux-thunk 2.3.0 和 typescript 3.1.3 正确键入 redux-thunk 操作和 mapDispatchToProps
问题描述
我正在更新我的项目中的依赖项(redux 4.0.1、redux-thunk 2.3.0、typescript 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 动作
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 动作类型应该是
export function toggleModalShown(): ThunkAction<void, IState, any, Action> {...}
代替
export function toggleModalShown(): ActionCreator<ThunkAction<void, IState, any, Action>> {...}
推荐阅读
- javascript - 尝试使用随机数时功能不会切换图像
- reactjs - 带有验证的操作
- angular - 如何使用 JSON.stringify() 以角度实现 isDirty 函数?
- python - 为什么 pyodbc 在 Fedora 27 ppc64 上会生成乱码错误信息?
- html - 如何用css设置高度与下一个类相同
- mysql - 如何更新多个表上的一个mysql查询中的多个列?
- r - as.date 在数据集中创建一些 NA
- julia - JuliaPro 无法在 Atom 中启动
- facebook - Bootloader/还在学习中,
- android - 用特定颜色填充可绘制图像的透明部分