如何在react组件中访问具有自动完成功能的动作创建者名称

Question

我最近在typescript中使用react和redux，非常棒。

我可以使用自动完成选项在useAppSelector中访问我的商店状态(如react redux官方文档中所述(，这可以加快开发时间，但我不能使用useAppDispatch钩子中的自动完成访问我的动作创建者名称。

原因是我在我的应用程序中使用了redux thunk中间件，所以我必须使用ThunkDispatch来键入AppDispatch，它有一个AnyAction类型作为操作。

//react-redux document
import {ThunkDispatch} from 'redux-thunk';
import {AnyAction} from 'react-redux';
type RootState = ReturnType<typeof store.getState>;
type AppDispatch = ThunkDispatch<RootState, any, AnyAction>;
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

目前，我导出一个包含我所有动作创建者的对象，将其导入任何组件都会给我它们的名称。像这样：

// inside actions.ts
const AppActions = {
action1: () => {},
action2: () => {},
...
}
export default AppActions;

// inside index.tsx
import AppActions from 'actions.ts'
// here i can access them like 
AppActions.action1()

那么，有更好的方法吗？

Answer 1

嘿，也许你能发布你的商店ts文件吗？然后

您将导出AppDispatch=typeofstore.dispatch；

然后在你的挂钩

export const useAppDispatch = () => useDispatch<AppDispatch>()

然后像一样在你的应用程序中使用它

const dispatch = useAppDispatch()
dispatch(YOU SHOULD SEE YOUR STORE ACTIONS OPTIONS)