React组件+TypeScript中dispatch触发类型错误问题及解决

问题现象 #

在React组件的handleSubmit方法中调用dispatch(createNote(data))时触发类型错误，但忽略该错误提交表单后，数据仍可正常保存至IndexedDB。

错误信息 #

Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'
(alias) createNote(data: Note): (dispatch: Dispatch) => void
import createNote

相关代码 #

createNote的两种写法（均未解决问题）：

export const createNote = (data: Note) => (dispatch: any) => {
     console.log(data);
     dispatch(createNoteReq());

     try {
         addNote(data);
         dispatch(noteCreate(data));
     } catch (error: any) {
         dispatch(notesReqFailed(error.message));
     }
};

export const createNote = (data: Note) => (dispatch: Dispatch<AnyAction>) => {
     console.log(data);
     dispatch(createNoteReq());

     try {
         addNote(data);
         dispatch(noteCreate(data));
     } catch (error: any) {
         dispatch(notesReqFailed(error.message));
     }
};

解决方案 #

使用Redux Toolkit提供的类型化钩子：自定义useAppDispatch替代原生useDispatch，useAppSelector替代原生useSelector，具体可参考Redux Toolkit TypeScript文档中「定义类型化钩子」的章节。

内容的提问来源于stack exchange，提问作者Денис Матерн